@charset "utf-8";
#mainVisual{position:relative;margin:auto;width:90%}
#mainVisual .mainTit{position:absolute;z-index:2;top:50%;left:50%;transform:translate(-50%, -50%);width:95%;display:flex;flex-direction:column;align-items:center;text-align:center}
#mainVisual .mainTit h1{white-space:pre-line;line-height:1.3;font-size:55px;font-weight:700;color:#fff}
#mainVisual .mainTit p{margin-top:50px;font-size:18px;font-weight:500;color:rgb(255, 255, 255, 0.7)}
#mainVisual .mainSlide{position:relative;width:100%;height:730px}
#mainVisual .mainSlide li{overflow:hidden;width:100%;height:100%;border-radius:25px}
#mainVisual .mainSlide li img{filter:brightness(0.5);width:100%;height:100%;object-fit:cover}
#mainVisual .navigation{position:absolute;z-index:3;top:50%;left:50%;transform:translate(-50%, -50%);display:flex;justify-content:space-between;width:95%}
#mainVisual .navigation div{cursor:pointer;text-align:center}
#mainVisual .navigation span{font-size:60px;color:#fff;transition:all .3s}

@media (hover:hover){
#mainVisual .navigation div:hover span{color:var(--primary)}
}
@media(max-width:1980px){
#mainVisual .mainSlide{height:630px;}
}
@media(max-width:1230px){
#mainVisual{width:calc(100% - 60px)}
}
@media(max-width:1024px){
#mainVisual{width:calc(100% - 30px)}
#mainVisual .mainSlide{height:570px}
#mainVisual .mainTit h1{font-size:45px}
}
@media(max-width:768px){
#mainVisual .mainSlide{height:420px}
#mainVisual .mainTit h1{font-size:30px}
#mainVisual .mainTit p{margin-top:30px;font-size:16px;word-break:keep-all}
#mainVisual .navigation span{font-size:35px}
}
@media(max-width:480px){
#mainVisual .mainSlide{height:300px}
#mainVisual .mainTit{width:85%}
#mainVisual .mainTit h1{font-size:23px}
#mainVisual .mainTit p{margin-top:20px;font-size:15px}
#mainVisual .navigation span{font-size:25px}
}
@media(max-width:380px){
#mainVisual .mainSlide{height:270px}
#mainVisual .mainTit h1{font-size:20px}
#mainVisual .mainTit p{margin-top:15px}
}