@charset "utf-8";

#mainVisual{position:relative;height:861px;overflow:hidden}
#mainVisual .swiper-container{width:100%;height:100%}
#mainVisual .swiper-container::before{position:absolute;z-index:3;content:'';inset:0%;width:100%;height:100%;background-color:rgba(0,0,0,0.42)}
#mainVisual .swiper-slide img{width:100%;height:100%;object-fit:cover}
#mainVisual .main_inner{position:absolute;z-index:4;top:50%;left:50%;transform:translate(-50%, -50%)}
#mainVisual .main_inner .text-box{text-align:center}
#mainVisual .main_inner .text-box h1{padding-bottom:15px;font-size:17px;font-weight:600;color:#fff}
#mainVisual .main_inner .text-box .main_txt_l{padding-bottom:20px;font-size:56px;font-weight:700;line-height:1.3;white-space:pre-line;word-break:keep-all;text-align:center;color:#fff}
#mainVisual .main_inner .text-box .main_txt_s{padding-bottom:25px;font-size:18px;line-height:1.3;color:rgba(255,255,255,0.7);text-align:center}
#mainVisual .main_inner .swiper-pagination{position:static;display:flex;justify-content:center;gap:20px}
#mainVisual .main_inner .swiper-pagination .swiper-pagination-bullet{width:10px;height:10px;background-color:#fff}

#mainVisual .scroll{z-index:4;position:absolute;bottom:70px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;width:45px;height:28px}
#mainVisual .scroll img{display:block;opacity:.2}
#mainVisual .scroll img:first-child{animation:arrowFlow 1.4s linear infinite}
#mainVisual .scroll img:last-child{animation:arrowFlow 1.4s linear infinite .2s}

@keyframes arrowFlow{
0%{transform:translateY(-4px);opacity:0}
25%{transform:translateY(0);opacity:0.6}
75%{transform:translateY(4px);opacity:.4}
100%{transform:translateY(8px);opacity:0}
}