@charset "utf-8";

#mainVisual{height:100vh}
#mainVisual .main-sticky{position:fixed;top:0;width:100%;height:100vh}
#mainVisual video{z-index:0;position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}

#mainVisual .main-sticky::before{z-index:1;position:absolute;content:'';top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.2);pointer-events:none}
#mainVisual .inner{position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;max-width:var(--mainsize);width:100%;height:100%;padding-bottom:110px;margin:0 auto}
#mainVisual h2{position:relative;overflow:hidden}
#mainVisual h2 span{display:inline-block;font-size:80px;font-weight:500;color:#fff}
#mainVisual .scrolldown{display:flex;align-items:center;gap:7px;color:#fff;font-family:var(--o-font);font-size:15px;font-weight:700;text-transform:uppercase;animation:scroll 2s ease infinite}
#mainVisual .scrolldown svg{flex-shrink:0}
@keyframes scroll{0%{transform:translateY(0);opacity :0}20%{transform:translateY(-15px);opacity:1}100%{transform:translateY(0);opacity:0}}

/* mainpage menu */
#mainMenu{z-index:20;position:fixed;top:50%;left:30px;transform:translateY(-50%);display:flex;flex-direction:column;gap:6px;align-items:flex-start}
#mainMenu.dark li::before{background-color:rgba(0,0,0,0.2)}
#mainMenu li{display:flex;align-items:center;gap:14px;padding:8px 15px;background-color:transparent;border-radius:5px;font-size:16px;font-weight:700;color:#fff;cursor:pointer;transition:background-color 0.2s}
#mainMenu li::before{content:'';width:6px;height:6px;border-radius:50px;background-color:rgba(255,255,255,0.5);transition:background-color 0.2s}
#mainMenu li span{opacity:0;visibility:hidden;transition:opacity 0.1s, visibility 0s linear 0.1s}
#mainMenu li.active{background-color:rgba(0,0,0,0.5)}
#mainMenu li.active::before{background-color:var(--primary)}
#mainMenu li.active span{opacity:1;visibility:visible;transition:opacity 0.1s}

/* menu hover + active 스타일 */
#mainMenu li.active, #mainMenu li:hover{background-color:rgba(0,0,0,0.5)}
#mainMenu li.active::before, #mainMenu li:hover::before{background-color:var(--primary)}
#mainMenu li.active span, #mainMenu li:hover span{opacity:1;visibility:visible;transition:opacity 0.1s}

/* 반응형 [s] */
@media (max-width:1800px){
#mainVisual .inner{padding:0 20px 110px}
#mainMenu{left:20px}
}
@media(max-width:1400px){
#mainVisual .inner{padding:0 20px 75px}
#mainVisual h2 span{font-size:65px}
#mainVisual .scrolldown{gap:4px;writing-mode:vertical-lr;font-size:13px}
#mainVisual .scrolldown svg{width:20px;height:20px}
#mainMenu li{gap:12px;padding:7px 12px;font-size:14px}
}
@media (max-width:1200px){
#mainVisual h2 span{font-size:55px}
}
@media (max-width:1024px){
#mainVisual h2 span{font-size:50px}
}
@media (max-width:768px){
#mainVisual .inner{padding:0 20px 110px}
#mainVisual h2 span{font-size:clamp(36px,6.51vw,50px)}
}
@media (max-width:480px){
#mainVisual h2 span{font-size:clamp(20px,7.5vw,36px)}
#mainMenu{display:none}
}
/* 반응형 [e] */