@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: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}
#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;inset: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;translate:-50% -50%;box-shadow:21px 0 51px rgba(0,95,255,0.4);animation:spin-glow 6s linear infinite}

@keyframes spin{to{ transform:rotate(360deg)}}
@keyframes spin-glow{to{ transform: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}