@charset "utf-8";

#mainVisual{position:relative}
#mainVisual .main_bnr{position:relative;margin:auto;width:100%;height:100vh;background:#111}
#mainVisual .main_bnr:after{position:absolute;z-index:10;content:'';top:0;left:0;width:100%;height:100vh;background:rgba(0,0,0,.5)}
#mainVisual .main_bnr .bg01{background-image:url(./main_banner01.jpg)}
#mainVisual .main_bnr .bg02{background-image:url(./main_banner02.jpg)}
#mainVisual .main_bnr .bg03{background-image:url(./main_banner03.jpg)}
#mainVisual .main_bnr .bg{display:flex;align-items:center;width:100%;height:100vh;background-size:cover}
#mainVisual video{width:100%;transform: scaleX(-1)}

#mainVisual .txt{position:absolute;z-index:10;top:30%;left:150px}
#mainVisual .txt h1{font-size:60px;color:#fff;font-family:'NexenTire'}
#mainVisual .txt h1 b{color:var(--primary)}
#mainVisual .txt p{font-size:18px;font-weight:500;color:#fff}

#mainVisual .kpi{position:absolute;z-index:10;bottom:0;left:0;width:100%;padding:50px 0;background:linear-gradient(180deg, rgba(0, 0, 0, .5), var(--dark))}
#mainVisual .kpi ul{display:grid;grid-template-columns:repeat(3,1fr);gap:50px;max-width:var(--main-size);margin:0 auto}
#mainVisual .kpi div{display:flex;flex-direction:column}
#mainVisual .kpi div strong{font-size:22px;font-weight:700;color:#fff}
#mainVisual .kpi div span{color:#fff;opacity:.3}
#mainVisual .kpi p{display:flex;align-items:center;justify-content:flex-end;font-size:60px;font-weight:700;color:#fff;text-align:right;font-family:var(--e-font)}

.rolling-number{display:inline-flex;gap:2px}
.rolling-number .digit{width:.7em;height:1em;overflow:hidden;position:relative}
.rolling-number .digit span{position:absolute;left:0;top:0;display:flex;flex-direction:column;transition:transform 1.8s cubic-bezier(.2,.8,.2,1)}
.rolling-number .digit i{font-style:normal;height:1em;line-height:1em}
.rolling-number .dot{line-height:1}

.main_pager{display:flex;align-items:center;gap:20px;margin-top:20px}
.main_pager .progress{position:relative;width:120px;height:2px;background:rgba(255,255,255,.2);overflow:hidden}
.main_pager .bar{position:absolute;top:0;width:0;height:100%;background:#fff}
.main_pager .nums{display:flex;gap:20px}
.main_pager .nums span{opacity:.3}
.main_pager span{cursor:pointer;font-size:16px;font-weight:700;color:#fff;font-family:var(--e-font)}


/* 반응형 [s] */
/* Desktop */
@media (max-width:1280px){
#mainVisual .txt{padding:0 20px}
#mainVisual .txt h1{font-size:45px}
#mainVisual .kpi{padding:50px}
#mainVisual .kpi p{font-size:50px}
#mainVisual video{height:100vh;object-fit:cover}
}

/* Tablet */
@media (max-width:1024px){
#mainVisual .main_bnr{height:calc(100vh - 100px)}
#mainVisual .txt{width:100%;left:0;text-align:center}
.main_pager{justify-content:center}
.main_pager .bar{left:0}
#mainVisual .kpi{padding:30px}
#mainVisual .kpi div strong{font-size:20px}
#mainVisual .kpi p{margin-top:20px;font-size:40px}
}

/* Mobile */
@media (max-width:768px){
#mainVisual .txt h1{font-size:30px}
#mainVisual .kpi{padding:15px}
#mainVisual .kpi ul{grid-template-columns:repeat(1,1fr);gap:20px}
#mainVisual .kpi ul li{display:flex;align-items:center;justify-content:space-between}
#mainVisual .kpi div strong{font-size:18px}
#mainVisual .kpi p{margin-top:0;font-size:25px}
}

@media (max-width:580px){
#mainVisual .txt p{font-size:16px}
#mainVisual .kpi div span{display:none}
}

/* Small Mobile */
@media (max-width:480px){
#mainVisual .txt h1{font-size:26px}
}
/* 반응형 [e] */