@charset "utf-8";

/* slide */
#main_banner{position:relative;width:100%}
#main_banner::before{content:"";display:block;position:absolute;bottom:0;left:0;width:100%;height:280px;z-index:2;background:linear-gradient(to top, #000 10%, transparent)}
#main_banner .main_slide{height:100vh}
#main_banner .main_slide li{background:center no-repeat;background-size:cover}
#main_banner .main_slide .slide01{background-image:url('./img/main_banner_01.jpg')}
#main_banner .main_slide .slide02{background-image:url('./img/main_banner_02.jpg')}

/* txt */
#main_banner .txt{position:absolute;bottom:90px;left:5.4%;width:100%;z-index:2;padding-right:13.5%;color:#fff}
#main_banner .txt .main_txt h2{line-height:1.5;white-space:pre-line}
#main_banner .txt .main_txt h1{padding-top:10px;font-size:158px;font-weight:300;line-height:1;font-family:var(--e-font)}
#main_banner .txt .info{display:flex;align-items:center;justify-content:space-between;margin-top:200px}
#main_banner .txt .info ul{display:flex;align-items:flex-start;gap:55px}
#main_banner .txt .info ul li span{font-weight:500;color:rgba(255, 255, 255, 0.4);font-family:var(--e-font)}
#main_banner .txt .info ul li b{display:block;padding:25px 0 5px;font-size:25px;font-weight:500;font-family:var(--e-font)}
#main_banner .txt .info ul li p{font-size:13px;color:rgba(255, 255, 255, 0.4)}
#main_banner .txt .info div{display:flex;align-items:center;gap:10px}
#main_banner .txt .info div a{display:flex;align-items:center;justify-content:center;width:141px;height:44px;font-size:16px;font-weight:700;color:#fff;background:rgba(255, 255, 255, 0.3);transition:all 0.2s;font-family:var(--e-font)}

@media (hover:hover){
    #main_banner .txt .info div a:hover{background:rgba(255, 255, 255, 0.5)}
}