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

/* Web Font Load */
@font-face {
    font-family: 'happyGh';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.0/행복고흥L.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'happyGh';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.0/행복고흥M.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'happyGh';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.0/행복고흥B.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Jalnan';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_231029@1.1/JalnanGothic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

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

.logo{ height: 3.5rem;}
/* *:has(>.logo){ position: relative; letter-spacing: -0.03em; 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.8);
    position: fixed; z-index: -1; width: 100%; 
    /* position: relative; */ opacity: 1; color: white; height: var(--aniw-h); 
}
#topani>*{ position: absolute;  }
#topani::before{
    content: "FlyToTheLight";
    display: block; position: absolute; top:-20px; left:20px;
    font-family: "happyGh"; font-style: italic; font-weight: 500; font-size: 16em; color: rgba(0, 0, 0, 0.15);
}
/* #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: 'Jalnan'; font-size: 2.5em; text-align: right; 
    width: var(--fullwidth); left:calc(50% - var(--fullwidth)/2); opacity: 0; line-height: 0.7;
    animation: aniktext ease 1s forwards;  animation-delay: 0.5s; text-shadow: 0 0 5px rgba(0, 0, 0, 1);
    --targeth:0%;--orgh:-10%;
}
/* #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; } 
}

/* h1 컨트롤 */
#page-h1{ display: none; } 

#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>#pagetitle{ padding-top: 1rem; font-size: 1.5em; color:black; text-align: center; font-family: "Jalnan"; font-weight: normal; }
#conts>#pagetitle::after{ content: "";display: block; margin-top:1rem; height: 2rem;  border-top: 1px solid rgba(0, 0, 0, 0.15); }
#conts>#pagetitle:has(+.nav-tab)::after{ height: 1rem; }
#conts>#pagetitle>.h1-desc{ font-family: initial; 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: 13rem; 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 > p:last-child{ padding: 1em 0 0 0; width: 100%; }

: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: flex-start; margin-top: 7px; }

    #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 - 13rem - var(--headerH)); }
    footer>.logo{ width: 9em; padding-top: 2rem; height: auto; }
    #footInfo{ width: var(--fullwidth); text-align: center; }
    #footInfo>*{ justify-content: center; }
    #footInfo > p:last-child{ width: 100%; }
}

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

/*PC*/
@media screen and (min-width: 1024.1px) {
    :root { --fullwidth: 1200px;  --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.8); }
    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:27px; }

    #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 150px 0 300px; 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 - 13rem - var(--aniw-h)); padding-bottom: 2rem; }
    #conts>#pagetitle:has(+.nav-tab){ margin-bottom:0rem; }
    #location{ position: relative; width: var(--fullwidth); margin: auto; right: 0px; top:70px; height: 0px; justify-content: flex-end;}
    #location+#pagetitle{  
        margin-left: auto; margin-right: auto; padding-top: 1.5rem; position: relative; overflow: hidden; min-width: var(--fullwidth); 
    }

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