@charset "utf-8";

#mainVisual{overflow:hidden;position:relative;width:100%;height:100vh;background:#222}

/* 텍스트 */
#mainVisual .main_txt{position:absolute;left:50%;top:50%;z-index:101;transform:translate(-50%, -50%);width:max-content;color:#fff;text-align:center;font-family:'Noto Serif KR'}
#mainVisual .main_txt>span{position:relative;display:inline-block;padding:0 50px;border-top:1px solid rgba(255,255,255,.2);border-bottom:1px solid rgba(255,255,255,.2);font-size:16px;line-height:2.8}
#mainVisual .main_txt>span:before{position:absolute;content:'';top:50%;left:25px;width:5px;height:5px;border-radius:50px;transform:translateY(-50%);background:#fff}
#mainVisual .main_txt>span:after{position:absolute;content:'';top:50%;right:25px;width:5px;height:5px;border-radius:50px;transform:translateY(-50%);background:#fff}
#mainVisual .main_txt p{margin:35px 0 80px;font-size:56px;font-weight:100;white-space:pre-line;letter-spacing:-1px;line-height:1.3}
#mainVisual .main_txt p b{font-weight:700}

#mainVisual .pager{display:flex;align-items:flex-end;justify-content:center;z-index:101}
#mainVisual .pager span{position:relative;opacity:.3;width:5px;height:15px;border-radius:0;background:#fff;transition:all .3s}
#mainVisual .pager span+span{margin-left:15px}
#mainVisual .pager span.on{opacity:1;transform:rotate(30deg);background:#fff}

/* 배경이미지 */
#mainVisual ul li{height:100vh;overflow:hidden}
#mainVisual ul li .bg{opacity:0;width:100%;height:100%;background:center no-repeat;background-size:cover;transform: skewX(3deg);transition:all 1.2s cubic-bezier(0.165, 0.840, 0.440, 1)}
#mainVisual ul li .bg01{background-image:url(./main_img01.jpg)}
#mainVisual ul li .bg02{background-image:url(./main_img02.jpg)}
#mainVisual ul li .bg03{background-image:url(./main_img03.jpg)}
#mainVisual ul li.on .bg{opacity:1;transform: skewX(0);}