@charset "utf-8";

#inc04{background-color:#fff}
#inc04 .sticky-container{height:700vh}
#inc04 .sticky-wrapper{position:sticky;top:0;height:100vh;overflow:hidden}
#inc04 .col-2{display:flex;align-items:center;justify-content:space-between;height:100%;padding-left:max(20px, calc((100% - var(--main-size)) / 2))}
#inc04 .area-title{display:flex;flex-direction:column;align-items:center;width:100%}
#inc04 .area-title p{overflow:hidden;line-height:1.3;color:#1d2945;text-align:center}
#inc04 .area-title p span{display:inline-block}
#inc04 .area-title .txt01{font-weight:200}
#inc04 .area-title .txt02{font-weight:600}

#inc04 .area-cores{overflow:hidden;flex:0 0 auto;min-width:0}
#inc04 .area-cores ul{display:flex;align-items:center}
#inc04 .area-cores ul li{position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:center;max-width:120px;width:100%;margin-right:86px;aspect-ratio:1;border-radius:500px;transition:max-width .6s ease, margin-right .6s ease}

#inc04 .area-cores ul li .line{opacity:0;visibility:hidden;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:100%;aspect-ratio:1;border-radius:500px;border:1px solid rgba(29, 41, 69, 0.05);--peak:1.02;animation:breathe 4s ease-in-out infinite;transition:opacity 0.6s ease}
#inc04 .area-cores ul li .line::before, #inc04 .area-cores ul li .line::after{position:absolute;content:'';top:50%;left:50%;transform:translate(-50%, -50%);width:100%;aspect-ratio:1;border-radius:500px}
#inc04 .area-cores ul li .line::before{max-width:380px;border:1px solid rgba(29, 41, 69, 0.08);--peak:1;animation:breathe 4s ease-in-out infinite .4s}
#inc04 .area-cores ul li .line::after{max-width:338px;border:1px solid rgba(29, 41, 69, 0.12);--peak:1.04;animation:breathe 4s ease-in-out infinite .8s}

#inc04 .area-cores ul li .round-text{--ring:12px;--border:1px;position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;max-width:100%;width:100%;aspect-ratio:1;border-radius:500px;background-color:var(--primary);font-weight:600;color:#fff;line-height:1.2;font-size:18px;text-align:center;transition:max-width 0.6s ease, font-size 0.3s ease, background-color 0.6s ease, opacity 0.6s ease}
#inc04 .area-cores ul li .round-text .tit{white-space:pre-line}

#inc04 .area-cores ul li .round-text b{height:0;overflow:hidden;font-size:18px;font-weight:600;color:var(--primary);text-transform:uppercase;transition:height 0.6s ease, padding-bottom 0.6s ease}
#inc04 .area-cores ul li .round-text .ring{opacity:0;visibility:hidden;position:absolute;inset:0;animation:spin 6s linear infinite;pointer-events:none;transition:opacity 0.6s ease}
#inc04 .area-cores ul li .round-text .ring::before{position:absolute;content:'';left:50%;top:calc(-1 * var(--ring) / 2);/* 핵심 보정 */width:var(--ring);aspect-ratio:1;border-radius:50px;background-color:var(--primary)}
#inc04 .area-cores ul li .round-text .shadow{opacity:0;visibility:hidden;position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;transition:opacity 0.6s ease}
#inc04 .area-cores ul li .round-text .shadow::after{position:absolute;content:'';left:50%;top:50%;width:100%;aspect-ratio:1;border-radius:500px;box-shadow:21px 0 51px rgba(0,95,255,0.4);animation:spin-glow 6s linear infinite;transform:translate(-50%, -50%)}

@keyframes spin{to{ transform:rotate(360deg)}}
@keyframes spin-glow{to{ transform:translate(-50%, -50%) rotate(360deg)}}
@keyframes breathe{0%, 100%{transform:translate(-50%, -50%) scale(1);opacity:0.5}50%{transform:translate(-50%, -50%) scale(var(--peak));opacity:0.7}}

#inc04 .area-cores ul li:not(.active) .round-text{opacity:0.2}
#inc04 .area-cores ul li.active + li .round-text{opacity:1}
#inc04 .area-cores ul li.active + li + li .round-text{opacity:0.8}
#inc04 .area-cores ul li.active + li + li + li .round-text{opacity:0.6}
#inc04 .area-cores ul li.active + li + li + li + li .round-text{opacity:0.5}
#inc04 .area-cores ul li.active + li + li + li + li + li .round-text{opacity:0.4}
#inc04 .area-cores ul li.active + li + li + li + li + li + li .round-text{opacity:0.3}
#inc04 .area-cores ul li.active + li + li + li + li + li + li + li .round-text{opacity:0.25}

#inc04 .area-cores ul li.active{z-index:1;max-width:404px;margin-right:15px}
#inc04 .area-cores ul li.active .round-text{max-width:234px;font-size:46px;background-color:#1d2945}
#inc04 .area-cores ul li.active .round-text b{height:auto;padding-bottom:5px}
#inc04 .area-cores ul li.active .line, #inc04 .area-cores ul li.active .round-text .ring, #inc04 .area-cores ul li.active .round-text .shadow{opacity:1;visibility:visible}

/* 반응형 [s] */
@media (max-width:1600px){
#inc04 .area-cores ul li{margin-right:50px}
#inc04 .area-cores ul li .line::before{max-width:372px}
#inc04 .area-cores ul li .line::after{max-width:330px}
#inc04 .area-cores ul li.active{max-width:396px}
#inc04 .area-cores ul li.active .round-text{font-size:38px}
}
@media (max-width:1200px){
#inc04 .area-cores ul li{max-width:105px;margin-right:30px}
#inc04 .area-cores ul li .round-text{font-size:16px}
#inc04 .area-cores ul li .round-text b{font-size:16px}
#inc04 .area-cores ul li.active{max-width:350px;margin-right:5px}
#inc04 .area-cores ul li.active .round-text{max-width:200px;font-size:30px}
#inc04 .area-cores ul li .round-text .shadow{width:200px;height:200px}
#inc04 .area-cores ul li .line::after{max-width:275px}
#inc04 .area-cores ul li .line::before{max-width:315px}
#inc04 .area-cores ul li .round-text .shadow::after{box-shadow:13px 0 40px rgba(0,95,255,0.4)}
}
@media (max-width:1024px){
#inc04 .col-2{display:grid;grid-template-columns:1fr;align-items:center;padding-left:0}
#inc04 .col-2 > *{grid-area:1/1}
#inc04 .area-cores ul li.active .round-text{max-width:170px}
#inc04 .area-cores ul li .round-text .shadow{width:170px;height:170px}
#inc04 .area-cores ul li .line::after{max-width:220px}
#inc04 .area-cores ul li .line::before{max-width:260px}
#inc04 .area-cores ul li.active{max-width:292px}
#inc04 .area-cores ul li.active .round-text{font-size:25px}
#inc04 .area-cores ul li .round-text b{font-size:14px}
#inc04 .area-cores ul li .round-text .shadow::after{box-shadow:5px 0 40px rgba(0,95,255,0.4)}
}
@media (max-width:560px){
#inc04 .area-cores ul li{max-width:85px;margin-right:20px}
#inc04 .area-cores ul li .round-text{font-size:14px}
#inc04 .area-cores ul li.active .round-text{max-width:140px}
#inc04 .area-cores ul li .round-text .shadow{width:140px;height:140px}
#inc04 .area-cores ul li .line::after{max-width:170px}
#inc04 .area-cores ul li .line::before{max-width:195px}
#inc04 .area-cores ul li.active{max-width:215px}
#inc04 .area-cores ul li.active .round-text{font-size:20px}
#inc04 .area-cores ul li .round-text b{font-size:12px}
#inc04 .area-cores ul li .line{width:215px}
}
@media (hover:none) and (pointer:coarse) {
#inc04 .area-cores ul li .line{display:none}
}
/* 반응형 [e] */