@charset "utf-8";

#mainVisual{overflow:hidden;position:relative;width:100%;background:#222;font-family:var(--e-font),var(--k-font)}

/* 텍스트 */
#mainVisual .main_txt{opacity:0;display:flex;justify-content:space-between;position:absolute;left:100px;top:40%;width:100%;z-index:101;color:#fff}
#mainVisual .main_txt h1{white-space:pre-line;font-size:80px;font-weight:700;line-height:1.2;word-break:keep-all}
#mainVisual .main_txt .txt{margin-top:22%;font-weight:500;font-size:24px;line-height:1.8;word-break:keep-all}
#mainVisual .main_txt .btn_area{display:grid;grid-template-columns:repeat(2,1fr);position:relative;right:200px;bottom:145px}
#mainVisual .main_txt .btn_area .first{opacity:0}
#mainVisual .main_txt .btn_area .cont{overflow:hidden;width:278px;height:256px;border:1px solid rgba(255, 255, 255, 0.3);text-align:center;color:#fff;background:rgba(0, 0, 0, 0.5)}
#mainVisual .main_txt .btn_area .cont a{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;padding:20px 35px;font-size:15px;color:#fff;transition:0.2s}
#mainVisual .main_txt .btn_area .cont:last-child{border-top:none;border-left:none}
#mainVisual .main_txt .btn_area .cont a > div p{font-size:20px;font-weight:700;transition:0.2s}
#mainVisual .main_txt .btn_area .cont a > div span{display:block;padding:15px 0 20px;color:rgba(255, 255, 255, 0.7);transition:0.2s}
#mainVisual .main_txt .btn_area .cont a > div div{padding:8px;border-top:1px solid rgba(255, 255, 255, 0.7);border-bottom:1px solid rgba(255, 255, 255, 0.7);transition:0.2s}
#mainVisual .main_txt .btn_area .cont a:hover{background:#fff}
#mainVisual .main_txt .btn_area .cont a:hover > div p{color:var(--primary)}
#mainVisual .main_txt .btn_area .cont a:hover > div div{color:#fff;background:var(--primary)}
#mainVisual .main_txt .btn_area .cont a:hover > div span{color:rgba(0, 0, 0, 0.7)}
#mainVisual .main_txt .btn_area .info_btn{display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(14,129,158,0.8);font-family:var(--e-font)}
#mainVisual .main_txt .btn_area .info_btn span{font-size:14px;font-weight:700;color:rgba(255, 255, 255, 0.4)}
#mainVisual .main_txt .btn_area .info_btn p{padding:15px 0;font-size:27px;font-weight:700;color:#fff}
#mainVisual .main_txt .btn_area .info_btn dl{display:flex;align-items:center;gap:10px;justify-content:center;text-align:center}
#mainVisual .main_txt .btn_area .info_btn dl dt{font-size:12px;font-weight:500;color:#fff}
#mainVisual .main_txt .btn_area .info_btn dl dd{font-size:12px;font-weight:400;color:rgba(255, 255, 255, 0.5)}


#mainVisual .controls{position:absolute;right:90px;bottom:60px;z-index:999}
#mainVisual .controls span{opacity:.5;cursor:pointer;color:#fff;transition:all .2s}
#mainVisual .controls span+span{margin-left:6px}
#mainVisual .controls span svg{width:40px;height:40px;stroke-width:1.5px}
#mainVisual .controls span:hover{opacity:1}

/* 배경이미지 */
#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:100vh;min-height:850px;overflow:hidden}
#mainVisual ul li video{min-width:100%;min-height:100%;width:auto;height:auto}
#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 .bg02{background-image:url(./main_img2.jpg)}
#mainVisual ul li .bg03{background-image:url(./main_img3.jpg)}
#mainVisual ul li.on .bg{width:101%;height:101%;opacity:1}