@charset "utf-8";

#mainVisual{overflow-x:hidden;position:relative;width:100%;height:100vh}

/* main_slide */
#mainVisual .main_slide{position:relative;width:100%;height:100%}
#mainVisual .main_slide li{display:flex}
#mainVisual .main_slide li .img{width:50%;height:100%;background-color:#c7bdb7}
#mainVisual .main_slide li .img img{width:100%;height:100%;object-fit:cover}
#mainVisual .main_slide li .txt{display:flex;flex-direction:column;justify-content:center;width:50%;height:100%}
#mainVisual .main_slide li .txt .tit{margin:0 auto;width:70%;font-size:45px;font-weight:300;line-height:1.2;color:#fff}
#mainVisual .main_slide li .txt .tit span{font-weight:700}
#mainVisual .main_slide li .txt .pl{margin:30px auto 0;width:70%;font-size:18px;font-weight:400;color:rgb(255, 255, 255, 0.6)}

/* slide txt background-color */
#mainVisual .main_slide .item01 .txt{background-color:#c06d17}
#mainVisual .main_slide .item02 .txt{background-color:#222}
#mainVisual .main_slide .item03 .txt{background-color:#654d32}

/* slide nav */
#mainVisual .nav_container{position:relative;display:flex;align-items:center;gap:80px;position:absolute;z-index:2;bottom:18%;left:80.5%}
#mainVisual .nav_container div.nav{display:flex;justify-content:center;align-items:center;width:65px;height:65px;transition:all .3s;border-radius:50%;background-color:rgb(0, 0, 0, 0.1);cursor:pointer}
#mainVisual .nav_container svg{color:#fff}

/* slide pager */
#mainVisual .pager{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:auto;color:#fff}
#mainVisual .pager span{margin:0 4px;font-size:16px;font-family:var(--e-font);color:#fff}

/* 반응형 [s] */
@media (hover:hover){
#mainVisual .nav_container div.nav:hover{background-color:#000}
}
@media (max-width:1380px){
#mainVisual .main_slide li .txt .tit{width:80%;font-size:38px}
#mainVisual .main_slide li .txt .pl{width:80%;font-size:17px}
#mainVisual .nav_container{left:55.5%}
#mainVisual .nav_container div.nav{width:60px;height:60px}
}
@media (max-width:1024px){
#mainVisual{height:610px}
#mainVisual .main_slide li{background-repeat:no-repeat;background-size:cover;background-position:50% 80%}
#mainVisual .main_slide li.item01{background-image:linear-gradient(rgb(0, 0, 0, 0.5), rgb(0, 0, 0, 0.5)), url(../../../images/main_banner/main_banner01_m.jpg)}
#mainVisual .main_slide li.item02{background-image:linear-gradient(rgb(0, 0, 0, 0.5), rgb(0, 0, 0, 0.5)), url(../../../images/main_banner/main_banner02_m.jpg)}
#mainVisual .main_slide li.item03{background-image:linear-gradient(rgb(0, 0, 0, 0.5), rgb(0, 0, 0, 0.5)), url(../../../images/main_banner/main_banner03_m.jpg)}
#mainVisual .main_slide li .img{display:none}
#mainVisual .main_slide li .txt{position:absolute;z-index:2;top:50%;left:50%;transform:translate(-50%, -50%);width:95%;text-align:center;background-color:transparent !important}
#mainVisual .main_slide li .txt .tit{width:100%;font-size:32px}
#mainVisual .main_slide li .txt .pl{width:100%;font-size:16px}
#mainVisual .nav_container{left:50%;bottom:12%;transform:translateX(-50%)}
#mainVisual .nav_container div.nav{width:55px;height:55px;background-color:rgb(255, 255, 255, 0.4)}
#mainVisual .nav_container div.nav svg{width:22px}
#mainVisual .nav_container div.nav:hover{background-color:#fff}
#mainVisual .nav_container div.nav:hover svg{color:#000}
}
@media (max-width:768px){
#mainVisual{height:505px}
#mainVisual .main_slide li .txt .tit{font-size:28px}
#mainVisual .main_slide li .txt .pl{margin:25px auto 0;width:80%;font-size:15px}
#mainVisual .nav_container{bottom:8%}
#mainVisual .nav_container div.nav{width:50px;height:50px}
#mainVisual .nav_container div.nav svg{width:20px}
#mainVisual .pager{display:flex;align-items:center;height:100%}
#mainVisual .pager span{margin:0 7px}
}
@media (max-width:480px){
#mainVisual{height:390px}
#mainVisual .main_slide li .txt .tit{font-size:23px}
#mainVisual .main_slide li .txt .pl{margin:20px auto 0;width:95%;font-size:14px}
#mainVisual .nav_container div.nav{width:45px;height:45px}
#mainVisual .nav_container div.nav svg{width:18px}
}
@media (max-width:380px){
#mainVisual{height:370px}
#mainVisual .main_slide li .txt .tit{font-size:20px}
#mainVisual .main_slide li .txt .pl{margin:15px auto 0;font-size:13px}
#mainVisual .nav_container{gap:75px}
#mainVisual .nav_container div.nav{width:42px;height:42px}
}
/* 반응형 [e] */