@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}

/* 반응형 [s] */
@media (hover:hover){
#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%}
}
@media (max-width:1380px){
#mainVisual h1{font-size:260px}
#mainVisual .sns_wrap{right:2.5%}
#mainVisual .scroll_container{bottom:2.5%}
}
@media (max-width:1024px){
#mainVisual h1{font-size:200px}
#mainVisual .sns_wrap span{margin-left:12px;width:35px;height:35px}
#mainVisual .sns_wrap svg{width:9px;height:9px}
#mainVisual h1 img{width:50%}
#mainVisual{height:60vh}
}
@media (max-width:768px){
#mainVisual h1{font-size:180px}
#mainVisual .sns_wrap{top:unset;bottom:2%;transform:none}
}
@media (max-width:480px){
#mainVisual h1{font-size:130px}
#mainVisual .sns_wrap span{margin-left:10px;width:32px;height:32px}
#mainVisual .sns_wrap svg{width:8px;height:8px}
#mainVisual .sns_wrap{bottom:2.2%}
#mainVisual{height:50vh}
#mainVisual .scroll_container{bottom:17.5%}

}
@media (max-width:380px){
#mainVisual h1{font-size:110px}
#mainVisual .scroll_container{font-size:13px}
#mainVisual .sns_wrap{font-size:13px}
#mainVisual .sns_wrap span{margin-left:6px;width:30px;height:30px}
#mainVisual .sns_wrap svg{width:7px;height:7px}

}
/* 반응형 [e] *1