@charset "utf-8";
#main_banner{position:relative;width:100%;height:100vh; z-index:1;}
#main_banner h1{display:flex;text-align:center;justify-content: center;}
#main_banner h1 span{opacity:0;filter:blur(10px);transform:scale(0.6);line-height:0.8;font-size:24vw;font-weight:700;font-family:var(--e-font);color:rgb(0, 0, 0, 0.15)}
#main_banner .intro_gsap{overflow:hidden;position:relative;padding:100px 5% 0;width:100%;height:100vh;z-index:1}
#main_banner .ripples{position:absolute;z-index:1;top:50%;left:50%;width:100%;height:100vh;transform: translate(-50%, -50%);filter:brightness(1);z-index:1}
#main_banner .ripples > div{position:relative;opacity:0;filter:blur(10px);width:100%;height:100%;transform:scale(1);filter:brightness(1);background-image:url('./main_banner01.jpg');background-position: 50% 44%;background-size:cover;-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23FF0066' d='M35.9,-59C46.7,-49,55.6,-39.2,61.4,-27.7C67.3,-16.2,70,-2.9,65.7,7.6C61.4,18.2,50,25.9,40,31.2C30,36.6,21.3,39.6,10.8,47.5C0.4,55.4,-11.7,68.2,-24.2,70.2C-36.8,72.1,-49.8,63.3,-58.4,51.6C-67.1,39.9,-71.3,25.4,-66.6,13.7C-61.9,2,-48.2,-6.9,-41.4,-17.6C-34.5,-28.4,-34.4,-41,-28.7,-53.2C-22.9,-65.5,-11.5,-77.5,0.6,-78.4C12.6,-79.2,25.2,-69,35.9,-59Z' transform='translate(100 100) rotate(-120)' /%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23FF0066' d='M35.9,-59C46.7,-49,55.6,-39.2,61.4,-27.7C67.3,-16.2,70,-2.9,65.7,7.6C61.4,18.2,50,25.9,40,31.2C30,36.6,21.3,39.6,10.8,47.5C0.4,55.4,-11.7,68.2,-24.2,70.2C-36.8,72.1,-49.8,63.3,-58.4,51.6C-67.1,39.9,-71.3,25.4,-66.6,13.7C-61.9,2,-48.2,-6.9,-41.4,-17.6C-34.5,-28.4,-34.4,-41,-28.7,-53.2C-22.9,-65.5,-11.5,-77.5,0.6,-78.4C12.6,-79.2,25.2,-69,35.9,-59Z' transform='translate(100 100) rotate(-120)' /%3E%3C/svg%3E");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:800px 800px;mask-size:800px 800px}
#main_banner .ripples > div canvas{width:100%;height:100%}
#main_banner .copy_info{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);width:90%}
#main_banner .copy_info > div{display:flex;justify-content:space-between;align-items:center}
#main_banner .copy_info > div:first-child{padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--black)}
#main_banner .copy_info h2 span{opacity:0;transform:translateY(100%);font-size:28px;font-weight:700;font-family:var(--k-font);color:var(--primary)}
#main_banner .copy_info span{opacity:0;transform:translateY(100%);font-size:20px;font-weight:400;font-family:var(--k-font);color:var(--black)}
#main_banner .description{opacity:0;position:absolute;z-index:2;bottom:-5%;left:50%;transform:translate(-50%, 50%);max-width:900px;width:100%;color:#fff}
#main_banner .description h2{margin:50px 0 70px;font-size: 60px;font-weight:700;font-family: var(--k-font);line-height:1}
#main_banner .description h3{color:#fff}
#main_banner .description p{margin-bottom:70px;font-size:20px;font-weight:400;text-align: justify;white-space: normal;}
#main_banner .link{border-bottom:2px solid #fff !important;color:#fff !important}
#main_banner .link span{background:url(./arrow_right.png) no-repeat center / contain !important}

/* 반응형 [s] */
@media (hover:hover){
#main_banner .link:hover{color:var(--primary) !important}
#main_banner .link:hover span{background:url(./arrow_right_fill.png) no-repeat center / contain !important}   
}
@media (max-width:1980px){
#main_banner .intro_gsap{padding: 130px  5% 0;}
#main_banner .ripples > div{mask-size:650px 650px;-webkit-mask-size:650px 650px}
#main_banner .copy_info h2 span{font-size:25px}
#main_banner .copy_info span{font-size:17px}
#main_banner .description h2{font-size: 60px;}
#main_banner .description p{font-size:17px}
}
@media (max-width:1380px){
#main_banner .ripples > div{mask-size:600px 600px;-webkit-mask-size:600px 600px}
#main_banner .description{max-width:700px}
#main_banner .description h2{font-size: 50px;}
#main_banner .description p{font-size:16px}
}
@media (max-width:1024px){
#main_banner h1 span{font-size: 22.5vw;}
#main_banner .intro_gsap{padding:80px 2.5% 0}
#main_banner .copy_info{width:95%}
#main_banner .copy_info h2 span{font-size:21px}
#main_banner .copy_info span{font-size:16px}
#main_banner .copy_info > div:first-child{margin-bottom:5px;padding-bottom:5px}
#main_banner .description{max-width:550px}
#main_banner .description h2{margin:40px 0 60px;font-size: 40px;}
#main_banner .description p{margin-bottom:60px;font-size:15px}
}
@media (max-width:768px){
#main_banner h1{justify-content:center;}
#main_banner .intro_gsap{padding-top: 90px;}
#main_banner .ripples > div{mask-size:500px 500px;-webkit-mask-size:500px 500px}
#main_banner .description{max-width:unset;width:95%;text-align: center !important;}
#main_banner .description h2{margin:30px 0 40px;font-size: 32px;line-height: 1.2;}
#main_banner .description p{margin:0 auto 50px;width:85%;white-space:normal;text-align: center;}
#main_banner .copy_info{bottom:30px}
#main_banner .copy_info h2 span{font-size:18px}
#main_banner .copy_info span{font-size:15px}
#main_banner .link{margin:auto}
}
@media (max-width:480px){
#main_banner .ripples > div{mask-size:470px 470px;-webkit-mask-size:470px 470px}
#main_banner .copy_info{bottom:20px}
#main_banner .copy_info h2 span{font-size:16px}
#main_banner .copy_info span{font-size:14px}
#main_banner .description h2{margin:20px 0 30px;font-size: 22px;word-break: keep-all;}
#main_banner .description p{margin-bottom:40px;width:90%;font-size:14px}
}
@media (max-width:390px){
#main_banner .ripples > div{mask-size:470px 470px;-webkit-mask-size:470px 470px}
#main_banner .copy_info{bottom:15px}
#main_banner .copy_info h2 span{font-size:15px}
#main_banner .copy_info span{font-size:13px}
#main_banner .description h2{font-size:40px}
#main_banner .description p{width:95%;font-size:13px}
}
/* 반응형 [e] */