@charset "utf-8";

#mainVisual{overflow:hidden;position:relative;width:100%;height:100vh;font-family:var(--k-font)}
#mainVisual .main_slide{position:relative;height:100%}
/*#mainVisual .main_slide:before{position:absolute;z-index:2;top:0;right:0;content:'';display:block;width:0;height:0;border-top:85px solid #fff;border-left:85px solid transparent}
#mainVisual .main_slide:after{position:absolute;z-index:2;bottom:0;left:0;content:'';display:block;width:0;height:0;border-bottom:85px solid #fff;border-right:85px solid transparent}*/

/* 텍스트 */
#mainVisual .main_txt{opacity:0;display:flex;flex-flow:column;position:absolute;left:250px;top:50%;z-index:2;color:#fff;transform:translateY(-50%)}
#mainVisual .b_txt{margin-bottom:30px;font-family:var(--e-font)}
#mainVisual .b_txt .r_txt{margin-left:100px}
#mainVisual .main_txt p{white-space:pre-line;font-size:60px;font-weight:700;line-height:1.1;text-transform:uppercase;word-break:keep-all}
#mainVisual .main_txt .txt{font-size:20px;opacity:.7;line-height:1.5;white-space:pre-line;word-break:keep-all}
#mainVisual .controls{position:absolute;align-items:center;left:250px;bottom:100px;z-index:2;display:flex}
#mainVisual .controls>span{display:flex;opacity:.5;cursor:pointer;color:#fff;transition:all .2s}
#mainVisual .controls>span+span{margin-left:6px}
#mainVisual .controls>span svg{width:25px;height:25px;stroke-width:1.5px}
#mainVisual .controls .pager{padding:0 20px;font-weight:700;color:#fff;font-family:var(--e-font)}

/* 배경이미지 */
#mainVisual ul:after{display:block;content:"";position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.35)}
#mainVisual ul li{height:100%;overflow:hidden}
#mainVisual ul li .bg{opacity:0;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:120%;height:120%;background:center no-repeat;background-size:cover;transition:all 1.2s cubic-bezier(0.165, 0.840, 0.440, 1)}
#mainVisual ul li .bg01{background-image:url(./main_img1.jpg)}
#mainVisual ul li .bg02{background-image:url(./main_img2.jpg)}
#mainVisual ul li .bg03{background-image:url(./main_img3.jpg)}
#mainVisual ul li .bg04{background-image:url(./main_img4.jpg)}
#mainVisual ul li .bg05{background-image:url(./main_img5.jpg)}
#mainVisual ul li.on .bg{width:101%;height:101%;opacity:1}

/* 반응형 [s] */
@media(hover:hover){
#mainVisual .controls>span:hover{opacity:1}
}
@media (max-width:1230px){
#mainVisual .main_txt{left:50px}
#mainVisual .controls{left:50px}
}
@media (max-width:1024px){
#mainVisual{padding:0px}
#mainVisual .main_txt{width:100%;left:50%;transform:translate(-50%, -50%)}
#mainVisual .b_txt p{text-align:center}
#mainVisual .b_txt .r_txt{margin-left:0px}
#mainVisual .main_txt .txt{text-align:center}
#mainVisual .controls{left:50%;transform:translateX(-50%)}
}
@media (max-width:768px){
#mainVisual .main_txt p{font-size:45px}
#mainVisual .main_txt .txt{font-size:17px;white-space:normal}
}
@media (max-width:480px){
#mainVisual{height:380px}
#mainVisual .main_slide{height:100%}
#mainVisual .main_txt{padding:0 15px}
#mainVisual .main_txt p{font-size:30px}
#mainVisual .main_txt .txt{font-size:15px}
#mainVisual .controls{bottom:45px}
}
@media (max-width:380px){
#mainVisual .main_txt p{font-size:28px}
#mainVisual .main_txt .txt{font-size:14px}
#mainVisual .controls{bottom:35px}
}
/* 반응형 [e] */