@charset "utf-8";
#mainVisual{position:relative;width:100%;height:100vh}
#mainVisual h1{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);text-align:center;width:100%;font-size:338px;font-weight:400;font-family:var(--main-font);color:#fff} 
#mainVisual .scroll_container{overflow:hidden;position:absolute;bottom:5%;left:50%;transform:translateX(-50%);text-align:center;width:125px;height:25px;line-height:25px;font-size:14px;font-weight:500;font-family:var(--sub-font);color:#fff;cursor:pointer}
#mainVisual .scroll_down{transform:translateY(0%);transition:all .3s}
#mainVisual .scroll_down:after{content:attr(data);position:absolute;bottom:-100%;left:50%;transform:translateX(-50%);width:100%}
#mainVisual .sns_wrap{display:flex;align-items:center;position:absolute;top:50%;right:5%;transform:translateY(-50%);font-size:14px;font-weight:500;font-family:var(--sub-font);color:#fff}
#mainVisual .sns_wrap .sns{overflow:hidden;position:relative;text-align:center;width:60px;height:25px;line-height:25px}
#mainVisual .sns_wrap .sns div{transform:translateY(0%);transition:all .3s}
#mainVisual .sns_wrap .sns div:after{content:attr(data);position:absolute;bottom:-100%;left:50%;transform:translateX(-50%);width:100%}
#mainVisual .sns_wrap span{overflow:hidden;position:relative;display:flex;justify-content:center;align-items:center;margin-left:15px;width:38px;height:38px;border:1px solid rgb(255, 255, 255, 0.2);border-radius:50%;cursor:pointer}
#mainVisual .sns_wrap span:after{content:"";position:absolute;z-index:-1;bottom:0%;left:0%;width:100%;height:0%;background-color:#fff;transition:all .3s}
#mainVisual .sns_wrap svg{width:10px;height:10px;fill:#fff}

#mainVisual .scroll_container:hover .scroll_down{transform:translateY(-100%)}
#mainVisual .sns_wrap:hover .sns div{transform:translateY(-100%)}
#mainVisual .sns_wrap:hover span svg{fill:#000;stroke-width:0px}
#mainVisual .sns_wrap:hover span:after{height:100%}