@charset "utf-8";

main{position: relative; z-index: 1; overflow: hidden; padding-bottom: 177px;}
.main .mcnt1{height: 900px;}
.main .mcnt1 video{width: 100%; height: 100%; object-fit:cover;}
.main .mcnt2 {position: relative; z-index: 1; padding-top: 177px; padding-bottom: 97px;} 
.main .mcnt2 .box{position: absolute; content: ''; right: 0; bottom: 0; width: 100%; height: 845px; background: #5C6B5C; z-index: -1; }
.main .mcnt2 .wrap2{display: flex; flex-direction: column; gap:63px;}


.main .mcnt2 .tit h4{font-family: 'NanumSquare'; color: #333; font-size: 86px; font-weight: 300; line-height: 119px; }
.main .mcnt2 .tit p{color: #333; font-size: 20px; font-weight: 400; line-height: 31.9px;  letter-spacing: -0.4px; margin: 20px 0 41px;}
.main .mcnt2 .tit .link-box > a{display: flex; align-items: flex-end;  gap:10px; font-family: 'NanumSquare'; color: #5C6B5C; font-size: 18px; font-weight: 700; letter-spacing: -0.36px; transition:.3s;}
.main .mcnt2 .tit .link-box > a svg{position: relative; top: -7px;}
.main .mcnt2 .tit .link-box > a:hover{letter-spacing: 0.1em;}
.main .mcnt2 .cnt{margin-left: auto;}
.main .mcnt2 .cnt figure{clip-path: inset(0 100% 0 0);}
.main .mcnt3{padding-top: 218px;}
.main .mcnt3 .tit{display: flex; align-items:center; justify-content: flex-end; gap:37px; color: #333; margin-bottom: 117px;}
.main .mcnt3 .tit p{text-align: right;font-size: 20px;font-weight: 400;line-height: 31.9px; letter-spacing: -0.4px;}
.main .mcnt3 .tit strong{font-family: 'NanumSquare'; font-size: 86px;font-weight: 300;line-height: 119px; }
.main .mcnt3 .cnt figure{position: relative; height: 650px; }
.main .mcnt3 .cnt figure > img{width: 100%; height: 100%; object-fit:cover; }
.main .mcnt3 .cnt figure figcaption{position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items:center; gap:36px; z-index: 1; color: #FFF; font-family: 'NanumSquare';font-size: 18px;font-weight: 700; letter-spacing: -0.36px;}
.main .mcnt3 .cnt figure figcaption span{width: 165px; height: 1px; background: #fff; } 

main .svg-line{position: absolute; right: 140px; top: 270px; z-index: -1; height: 0%; overflow: hidden;}
main .svg-line svg{overflow: visible;}


#main .down-box{ position: fixed; right: 198px; bottom: 100px; transition:.3s;}

#main .down-box > a{position: relative; width: 286px; height: 286px; box-sizing: border-box; display: flex; align-items:center; justify-content: center; scale:0.8; transition:.3s;}
#main .down-box > a:hover{scale:1;}
#main .down-box > a:after{position: absolute; content: ''; width: 100%; height: 100%; background: url(../img/main/main-down.png) center no-repeat; animation: rotate360 9s linear infinite;}
#main .down-box > a span{display: flex; align-items:center; justify-content: center; text-align: center; width: 210px; height: 210px; border-radius: 112px; background: rgba(229, 131, 88, 0.60); color: var(--fff, #FFF); text-align: center; text-shadow: 2px 2px 3px #EA6D37; font-size: 20px; font-weight: 500; line-height: normal; letter-spacing: -0.4px; backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(10px);   box-shadow:0 10px 30px rgba(0, 0, 0, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.4);   }
@keyframes rotate360 {
  from {transform: rotate(0deg);}
  to { transform: rotate(360deg);}
}

#main .down-box.sc{bottom: 250px;}