@charset "utf-8";

#mainVisual{position:relative;height:150vh}

/* 스와이퍼 */
#mainVisual .main_slide{position:absolute;bottom:0;width:100%;height:80vh}
#mainVisual ul li .bg{opacity:0;width:100%;height:100%;background:bottom no-repeat;background-size:cover;filter:brightness(.5);transition:all .3s;background-color:#111}
#mainVisual ul li.on .bg{opacity:1;transform:skewX(0)}
#mainVisual ul li .bg01{background-image:url('./main01.jpg')}
#mainVisual ul li .bg02{background-image:url('./main02.jpg')}
#mainVisual ul li .bg03{background-image:url('./main03.jpg')}

/* 텍스트 */
#mainVisual .main_txt{position:sticky;top:100px;z-index:10;width:50%;margin-left:auto;padding-top:7%;padding-bottom:5%;font-family:var(--k-font)}
#mainVisual .main_txt h1{font-size:60px;font-weight:700;color:#111;white-space:pre-line;transition:all .3s}
#mainVisual .main_txt.on h1{color:#fff}
#mainVisual .main_txt .tabs{display:none;margin-top:70px}
#mainVisual .main_txt.on .tabs{display:block}
#mainVisual .main_txt .tabs div{display:block;width:100%;height:auto;border-radius:0;color:#fff;opacity:.3;background:none}
#mainVisual .main_txt .tabs div+div{margin-top:50px}
#mainVisual .main_txt .tabs .on{opacity:1}
#mainVisual .main_txt .tabs p{margin-bottom:5px;font-size:22px;font-weight:700;word-break:keep-all}
#mainVisual .main_txt .tabs span{font-size:18px;word-break:keep-all}

/* 반응형 [s] */
@media (max-width:1380px){
#mainVisual{height:145vh}
#mainVisual .main_txt{padding-top:5%;padding-bottom:10%;top:150px}
#mainVisual .main_txt h1{font-size:50px}
#mainVisual .main_txt .tabs p{font-size:20px}
#mainVisual .main_txt .tabs span{font-size:16px}
}
@media (max-width:1024px){
#mainVisual{height:1100px}
#mainVisual .main_txt{padding-bottom:20%;top:105px}
#mainVisual .main_txt h1{font-size:38px}
#mainVisual .main_txt .tabs p{font-size:18px}
#mainVisual .main_txt .tabs span{font-size:15px}
#mainVisual .main_slide{height:660px}
}
@media (max-width:768px){
#mainVisual{height:600px}
#mainVisual ul li .bg{opacity:1;transform:skewX(0)}
#mainVisual .main_txt{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);padding:0px;margin:0px;width:95%;text-align:center}
#mainVisual .main_txt h1{font-size:30px;color:#fff}
#mainVisual .main_txt .tabs{display:flex;flex-direction:column;gap:40px;margin-top:60px}
#mainVisual .main_txt .tabs div+div{margin-top:0px}
#mainVisual .main_txt .tabs p{margin-bottom:8px;font-size:17px}
#mainVisual .main_slide{position:relative;bottom:unset;height:100%}
}
@media (max-width:480px){
#mainVisual{height:500px}
#mainVisual .main_txt h1{font-size:25px}
#mainVisual .main_txt .tabs{margin-top:50px;gap:30px}
#mainVisual .main_txt .tabs p{margin-bottom:6px;font-size:16px}
#mainVisual .main_txt .tabs span{font-size:14px}
}
@media (max-width:380px){
#mainVisual{height:450px}
#mainVisual .main_txt h1{font-size:21px}
#mainVisual .main_txt .tabs{margin-top:40px;gap:25px}
#mainVisual .main_txt .tabs p{margin-bottom:5px;font-size:15px}
#mainVisual .main_txt .tabs span{font-size:13px}
}
/* 반응형 [e] */