@charset "utf-8";

#inc04{position:relative;color:#fff;background:linear-gradient(to bottom, #111 75%, #fff 25%)}

#inc04 .inner{position:relative;z-index:10;display:flex;padding-bottom:200px}
#inc04 .inner > *{flex:1}
#inc04 .group-title{position:sticky;top:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;height:100vh;text-align:left !important;background-image:url(./img/inc04_bg.png);background-repeat:no-repeat;background-position:right 37%;background-size:contain}

#inc04 .group-title .text-box{width:570px}
#inc04 .group-title .txt01{font-size:32px;font-weight:800}
#inc04 .group-title h2{padding:28px 0 32px;font-family:var(--e-font);font-size:75px !important;font-weight:700 !important;line-height:100%}
#inc04 .group-title .desc{padding-bottom:64px;font-size:24px;font-weight:600;line-height:1.4;white-space:pre-line}
#inc04 .group-title .btn--primary{width:202px;height:65px;font-size:20px}

#inc04 .group-cont ul{display:flex;flex-direction:column;align-items:flex-end;gap:45px;width:570px}
#inc04 .group-cont ul li{position:relative;width:389px;height:478px;border-radius:20px;overflow:hidden}
#inc04 .group-cont ul li::before{position:absolute;content:'';top:0;left:0;width:100%;height:100%;background:linear-gradient(to top, rgba(0,0,0,0.8) 15%, transparent 45%)}
#inc04 .group-cont .thumb-box{width:100%;height:100%}
#inc04 .group-cont .thumb-box img{width:100%;height:100%;object-fit:cover}
#inc04 .group-cont .text-box{position:absolute;bottom:36px;left:32px;display:flex;flex-direction:column}
#inc04 .group-cont .text-box span{padding-bottom:22px;font-size:16px;font-weight:700}
#inc04 .group-cont .text-box .comment{font-size:22px;font-weight:700;white-space:pre-line}

/* 배경 애니메이션 */
#inc04 .bottom-bg{position:absolute;bottom:240px;left:0;width:100%;height:753px;overflow-x:clip}
.wave {position:absolute;bottom:0;left:0;width:300%;height:753px;background-repeat:repeat-x;background-size:cover;background-size:50% 100%;transform:translate3d(0, 0, 0);will-change:transform}
.wave.orange{z-index:2;background-image:url(./img/inc04_bt_bg01.png);animation:waveSwellReverse 4s ease-in-out infinite}
.wave.yellow{z-index:1;bottom:-170px;background-image:url(./img/inc04_bt_bg02.png);animation:waveSwell 5s ease-in-out infinite;
}
@keyframes waveSwell {0% {transform:translate(0, 0)}25% {transform:translate(-80px, -20px)}50% {transform:translate(-160px, -40px)}75% {transform:translate(-80px, -20px)} 100% {transform:translate(0, 0)}}
@keyframes waveSwellReverse {0% {transform:translate(0, 0)}25% {transform:translate(-80px, 20px)}50% {transform:translate(-160px, 40px)}75% {transform:translate(-80px, 20px)}100% {transform:translate(0, 0)}}

/* marquee */
#inc04 .marquee{overflow:hidden;position:relative;z-index:1}
#inc04 .marquee .scroll{display:flex;animation:marqueeDesktop 18s linear infinite}
#inc04 .marquee .scroll span{font-family:var(--e-font);font-size:280px;font-weight:600;line-height:100%;color:#111;white-space:nowrap}
@keyframes marqueeDesktop {0%{transform:translateX(0)} 100%{transform:translateX(-3997.85px)}}