@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;flex-flow:column;position:absolute;left:15%;top:30%;z-index:101;}
#mainVisual .main_txt p.tit1{white-space:pre-line;font-size:70px;color:#333;font-family:'noto Serif kr', sans-serlf;font-weight:600;line-height:1.1;word-break:keep-all;}
#mainVisual .main_txt p.tit1 span {color:#976a46;font-size:80px;}
#mainVisual .main_txt p.tit2{white-space:pre-line;font-size:50px;color:#333;font-family:'roboto', sans-serlf;font-weight:200;padding:5% 0;word-break:keep-all;}
#mainVisual .main_txt p.tit2 span {font-weight:600}
#mainVisual .main_txt .txt{line-height:1.8;word-break:keep-all}
#mainVisual .main_txt .txt p.txt1{font-size:30px;line-height:1.1;font-weight:500}
#mainVisual .main_txt .txt p.txt2{font-size:19px;color:#7c471c;line-height:1.2;font-weight:600;margin-top:5%;word-break:keep-all}

#mainVisual .controls{position:absolute;right:90px;bottom:60px;z-index:101}
#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%;}
#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:115%;height:115%;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_img2.jpg)}
#mainVisual ul li .bg02{background-image:url(./main_img1.jpg)}
#mainVisual ul li.on .bg{width:101%;height:101%;opacity:1}

@media (max-width:1320px){

#mainVisual .main_txt{top:28%;left:7%}
#mainVisual .main_txt p.tit1{font-size:55px}
#mainVisual .main_txt p.tit1 span {font-size:65px}
#mainVisual .main_txt p.tit2 {font-size:40px}
#mainVisual .main_txt .txt p.txt1 {font-size:25px}
#mainVisual .main_txt .txt p.txt2 {font-size:17px}
#mainVisual ul li{height:100%;min-height:650px}
}
@media (max-width:1024px){
#mainVisual .main_txt{padding:0 50px;left:0}
#mainVisual .main_txt p{font-size:55px}
#mainVisual .main_txt .txt p.txt1{}
#mainVisual ul li video{width:100%;height:100%;object-fit:cover}
#mainVisual .controls{right:50px}
}

@media (max-width:768px){

#mainVisual .main_txt{top:10%;left:2%;right:2%;padding:0;text-align:center;}

#mainVisual .controls{right:15px;bottom:15px}
#mainVisual .controls span svg{width:32px;height:32px}

#mainVisual ul li{height:100vh;min-height:750px;background-size:cover;}
#mainVisual ul li .bg01{background-image:url(./main_img2_mo.jpg)}
#mainVisual ul li .bg02{background-image:url(./main_img1_mo.jpg)}
}

@media (max-width:480px){


#mainVisual .main_txt{top:10%;left:0%;right:0%;text-align:center;padding:0;}
#mainVisual .main_txt p.tit1{font-size:40px}
#mainVisual .main_txt p.tit1 span {font-size:45px}
#mainVisual .main_txt p.tit2 {font-size:33px;letter-spacing:-2px;}
#mainVisual .main_txt p.tit2 span {letter-spacing:0px}
#mainVisual .main_txt .txt p.txt1 {font-size:19px;letter-spacing:-1px;font-weight:600;line-height:1.4}
#mainVisual .main_txt .txt p.txt2 {font-size:15px;line-height:1.4;padding:5%;letter-spacing:-1px;}

}