@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{max-width:570px;width:100%}
#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;max-width:570px;width:100%}
#inc04 .group-cont ul li{position:relative;max-width:389px;width:100%;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;line-height:1.2;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{--marquee-distance:-3997.85px;overflow:hidden;position:relative;z-index:1}
#inc04 .marquee .scroll{display:flex;animation:marqueeInc04 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 marqueeInc04 {0% { transform:translateX(0)}100% { transform:translateX(var(--marquee-distance))}}

/* 반응형 [s] */
@media (max-width:1500px){
#inc04{background:linear-gradient(to bottom, #111 78%, #fff 22%)}
#inc04 .inner{padding-bottom:100px}
#inc04 .group-title h2{padding:20px 0 34px;font-size:60px}
#inc04 .group-title .desc{padding-bottom:55px}
#inc04 .group-title .btn--primary{width:190px;height:55px;font-size:17px}
#inc04 .group-title .txt01{font-size:26px}
#inc04 .bottom-bg{bottom:205px}
#inc04 .bottom-bg, .wave{height:620px}
#inc04 .marquee{--marquee-distance:-2855px}
#inc04 .marquee .scroll span{font-size:200px}
}
@media (max-width:1200px){
#inc04{background:linear-gradient(to bottom, #111 75%, #fff 25%)}
#inc04 .inner{padding-bottom:70px}
#inc04 .group-title{align-items:center}
#inc04 .group-title .text-box{max-width:none;width:auto}
#inc04 .group-cont ul{align-items:center;gap:20px}
#inc04 .group-cont ul li{max-width:340px;height:420px}
#inc04 .group-cont .text-box span{padding-bottom:15px}
#inc04 .group-cont .text-box .comment{font-size:18px}
#inc04 .bottom-bg{bottom:235px}
#inc04 .bottom-bg, .wave{height:530px}
}
@media (max-width:1024px){
#inc04{background:linear-gradient(to bottom, #111 76%, #fff 24%)}
#inc04 .group-title h2{padding:14px 0 26px}
#inc04 .group-title .txt01{font-size:20px}
#inc04 .group-title .desc{padding-bottom:35px}
#inc04 .group-title .btn--primary{width:165px;height:50px;font-size:16px}
#inc04 .group-cont ul li{max-width:295px;height:380px}
#inc04 .group-cont .text-box{bottom:0px;left:0px;padding:24px}
#inc04 .group-cont .text-box .comment{font-size:15px;line-height:1.4}
#inc04 .group-cont .text-box span{padding-bottom:12px}
#inc04 .bottom-bg{bottom:185px}
#inc04 .bottom-bg, .wave{height:520px}
.wave.yellow{bottom:-145px}
#inc04 .marquee{ --marquee-distance:-2213px}
#inc04 .marquee .scroll span{font-size:155px}
}
@media (max-width:768px){
#inc04{background:linear-gradient(to bottom, #111 90%, #fff 10%)}
#inc04 .inner{flex-direction:column-reverse;gap:0}
#inc04 .group-title{position:static;height:auto;background-position:center top 25px}
#inc04 .group-title .txt01{font-size:22px}
#inc04 .group-title .text-box{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:420px;text-align:center}
#inc04 .group-cont ul{flex-direction:row;gap:14px;max-width:none;padding-bottom:14px;overflow-x:auto}
#inc04 .group-cont ul li{max-width:280px;flex-shrink:0}
#inc04 .bottom-bg{bottom:70px}
#inc04 .bottom-bg, .wave{height:330px}
.wave.yellow{bottom:-100px}
.wave.orange{height:310px}
#inc04 .marquee{--marquee-distance:-1713px;z-index:3}
#inc04 .marquee .scroll span{font-size:120px}
#inc04 .group-cont ul::-webkit-scrollbar {width:4px}
#inc04 .group-cont ul::-webkit-scrollbar-thumb {background:#9e9e9e;border-radius:25px;border:3px solid transparent;background-clip:padding-box}
#inc04 .group-cont ul::-webkit-scrollbar-track{background-color:#474747}
}
@media (max-width:480px){
#inc04{background:linear-gradient(to bottom, #111 84%, #fff 16%)}
#inc04 .group-title{background-position:center}
#inc04 .group-title .text-box{height:370px}
#inc04 .group-title .txt01{font-size:18px}
#inc04 .group-title .btn--primary{width:140px;height:42px;font-size:15px}
#inc04 .group-cont ul{padding:0 15px 14px}
#inc04 .group-cont ul li{max-width:255px;height:340px}
#inc04 .group-cont .text-box span{padding-bottom:5px;font-size:15px}
#inc04 .group-cont .text-box .comment{font-size:15px}
#inc04 .bottom-bg, .wave{height:220px}
.wave.orange{height:245px}
.wave.yellow{bottom:-68px}
@keyframes waveSwell {0% {transform:translate(0, 0)}25% {transform:translate(-60px, -10px)}50% {transform:translate(-140px, -20px)}75% {transform:translate(-60px, -10px)} 100% {transform:translate(0, 0)}}
@keyframes waveSwellReverse {0% {transform:translate(0, 0)}25% {transform:translate(-60px, 10px)}50% {transform:translate(-140px, 20px)}75% {transform:translate(-60px, 10px)}100% {transform:translate(0, 0)}}
#inc04 .marquee{ --marquee-distance:-1427px}
#inc04 .marquee .scroll span{font-size:100px}
}
@media (max-width:390px){
#inc04{background:#111;overflow:hidden}
#inc04 .inner{gap:60px;padding-bottom:40px}
#inc04 .bottom-bg{display:none}
#inc04 .group-title .text-box{height:auto}
#inc04 .marquee .scroll span{color:#fff}
}
/* 반응형 [e] */