@charset "utf-8";

#inc03{overflow:hidden;position:relative;margin:300px auto 0;padding:0 4%}

/* Title */
#inc03 .tit h2{font-size:68px;font-weight:700;font-family:var(--e-font);line-height:1.2;color: #fff;}
#inc03 .tit h2 span{color:var(--primary)}
#inc03 .tit div{margin:60px 0 60px 150px;font-size:18px}

/* Content */
#inc03 .cont{display:flex;gap:100px;position:relative;padding-left:calc(50% - 90px)}
#inc03 .cont:before{content:"";position:absolute;bottom:106px;left:-5%;width:1px;height:1px;background:rgb(255, 255, 255, .12);transition:all 1.5s cubic-bezier(0.445, 0.05, 0.55, 0.95)}
#inc03 .cont.aos-animate:before{width:100vw}
#inc03 .cont li{font-size:15px;font-weight:500;text-align:center}
#inc03 .cont li span{font-size:80px;font-weight:100}
#inc03 .cont li h3{position:relative;padding-bottom:90px;font-family:var(--e-font);}
#inc03 .cont li h3:after{content:"";position:absolute;bottom:0px;left:50%;transform:translateX(-50%);width:7px;height:7px;border-radius:50%;background-color:var(--primary)}
#inc03 .cont li div{padding-top:50px;font-weight:400;line-height:1.8;text-align:center;color:#fff}

/* Bg */
#inc03 .bg{position:absolute;top:-85px;left:53%;z-index:-1;white-space:nowrap}
#inc03 .bg span{display:inline-block;position:relative;font-size:680px;font-weight:700;line-height:1;color:#102221}
#inc03 .bg span:after{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background:rgb(53,156,149);background:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 75%)}
#inc03 .bg span:nth-child(2){transform:translate(-220px,4px)}
#inc03 .bg span:nth-child(3){transform:translate(-440px,8px)}
#inc03 .bg span:nth-child(3):after{background:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 55%)}

/* 반응형 [s] */
@media (max-width:1480px){
#inc03 .tit h2{font-size:56px}
#inc03 .tit div{margin:50px 0 50px 100px;font-size:17px}
#inc03 .cont{gap:70px;padding-left:calc(48% - 90px)}
#inc03 .cont li span{font-size:75px}
#inc03 .bg{top:-47px}
#inc03 .bg span{font-size:580px}
}
@media (max-width:1380px){
#inc03{margin:200px auto 0}
#inc03 .tit h2{font-size:50px}
#inc03 .tit div{margin:40px 0 40px 70px}
#inc03 .cont{gap:40px;padding-left:calc(45% - 90px)}
#inc03 .cont li span{font-size:70px}
#inc03 .bg{top:-65px}
#inc03 .bg span{font-size:560px}
}
@media (max-width:1024px){
#inc03{margin:150px auto 0;padding:0 3%}
#inc03 .tit h2{font-size:42px}
#inc03 .tit div{margin:20px 0 0;font-size:16px}
#inc03 .cont{padding:0px;margin-top:110px}
#inc03 .cont:before{bottom:87px;transition:none}
#inc03 .cont li{width:calc(100% / 3)}
#inc03 .cont li span{font-size:58px}
#inc03 .cont li h3{padding-bottom:70px}
#inc03 .cont li div{padding-top:30px}
#inc03 .bg{top:0px;left:41%}
#inc03 .bg span{font-size:480px}
#inc03 .bg span:nth-child(2){transform:translate(-170px, 4px)}
#inc03 .bg span:nth-child(3){transform:translate(-300px, 8px)}
}
@media (max-width:768px){
#inc03{margin:100px auto 0}
#inc03 .cont:before{height:100%;top:50%;left:50%;transform:translate(-50%, -50%)}
#inc03 .cont.aos-animate:before{width:1px}
#inc03 .tit{text-align:center}
#inc03 .tit h2{font-size:38px}
#inc03 .tit div{margin:15px 0 0;font-size:15px}
#inc03 .cont{display:grid;grid-template-areas:'. a' 'b .' '. c';grid-template-columns:repeat(2, 1fr);gap:0px;margin-top:70px;padding:30px 0}
#inc03 .cont li{width:100%}
#inc03 .cont li:nth-child(1){grid-area:a}
#inc03 .cont li:nth-child(2){grid-area:b}
#inc03 .cont li:nth-child(3){grid-area:c}
#inc03 .cont li span{font-size:52px}
#inc03 .cont li h3{padding:0px}
#inc03 .cont li:nth-child(2) h3:after{bottom:50%;left:auto;right:-3px;transform:translateY(50%)}
#inc03 .cont li:not(:nth-child(2)) h3:after{bottom:50%;left:-3px;transform:translateY(50%)}
#inc03 .cont li div{padding-top:20px}
#inc03 .bg{display:none}
}
@media (max-width:480px){
#inc03{margin:80px auto 0}
#inc03 .tit h2{font-size:30px}
#inc03 .tit div{font-size:14px}
#inc03 .cont{margin-top:60px}
#inc03 .cont li{padding:0 10px;font-size:14px}
#inc03 .cont li span{font-size:44px}
#inc03 .cont li div{padding-top:15px;line-height:1.5;white-space:normal}
#inc03 .cont li:not(:nth-child(2)) h3:after{left:-13px}
#inc03 .cont li:nth-child(2) h3:after{right:-13px}
}
@media (max-width:380px){
#inc03{margin:100px auto 0}
#inc03 .tit h2{font-size:26px}
#inc03 .tit div{font-size:13px}
#inc03 .cont li{font-size:13px}
#inc03 .cont li span{font-size:38px}
}
/* 반응형 [e] */