@charset "utf-8";

#inc03{overflow:hidden;padding-top:180px}
#inc03 .mo{display:none}
#inc03 .group-title{position:relative;display:flex;flex-direction:column;align-items:center;gap:50px;padding-bottom:100px}
#inc03 .group-title::before{position:absolute;content:'WHY FRONT RANGE';width:100%;text-align:center;font-size:80px;font-weight:700;line-height:1;color:#f4f5f7;z-index:-1;top:-50px;left:50%;transform:translateX(-50%)}
#inc03 .group-title .tit--l{color:#111 !important}
#inc03 .group-title .desc{color:#8A8E97;font-size:20px;font-weight:500;white-space:pre-line;line-height:1.5;text-align:center}
#inc03 .group-title .desc b{font-weight:700;color:var(--primary)}

#inc03 .area-marquee{--x:-3860px;--xReverse:-3630px;--gap:50px}
#inc03 .area-marquee .marquee-container{position:relative;display:flex;flex-direction:column;gap:40px;padding-bottom:85px}
#inc03 .area-marquee .marquee-container::before, #inc03 .area-marquee .marquee-container::after{z-index:1;position:absolute;content:'';top:0;width:200px;height:100%}
#inc03 .area-marquee .marquee-container::before{left:0;background:linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%)}
#inc03 .area-marquee .marquee-container::after{right:0;background:linear-gradient(to left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%)}
#inc03 .area-marquee .marquee-wrapper{display:flex;gap:var(--gap);animation:logoMarquee 70s linear infinite}
#inc03 .area-marquee .marquee-wrapper:last-child{animation:logoMarqueeReverse 70s linear infinite}
#inc03 .area-marquee .marquee-wrapper ul{display:flex;gap:var(--gap);align-items:center}
#inc03 .area-marquee .marquee-wrapper ul li{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:180px;aspect-ratio:180 / 75}
#inc03 .area-marquee .marquee-wrapper ul li img{width:100%;height:100%;object-fit:contain}
#inc03 .area-marquee .img-box{display:flex;justify-content:center}
#inc03 .area-marquee .img-box img{max-width:880px;width:100%}
@keyframes logoMarquee {0%{transform:translateX(0)}100%{transform:translateX(var(--x))}}
@keyframes logoMarqueeReverse {0%{transform:translateX(var(--x))} 100%{transform:translateX(0)}}

#inc03 .area-count{padding:90px 0 95px;background-color:#302878}
#inc03 .area-count ul{display:flex;justify-content:center}
#inc03 .area-count ul li{position:relative;display:flex;flex-direction:column;align-items:center;gap:100px;padding:0 75px;color:#fff;text-align:center}
#inc03 .area-count ul li:not(:last-child)::after{position:absolute;content:'';right:0;top:50%;transform:translateY(-50%);width:1px;height:224px;background-color:rgba(255,255,255,0.16)}
#inc03 .area-count ul li dl{display:flex;flex-direction:column;gap:20px}
#inc03 .area-count ul li dl dt{font-size:20px;font-weight:700;color:rgba(255,255,255,0.78)}
#inc03 .area-count ul li dl dd{font-family:var(--o-font);font-size:40px;font-weight:700}
#inc03 .area-count ul li dl dd .count{display:inline-flex;height:1em;line-height:1em;overflow:hidden}
#inc03 .area-count ul li dl dd .count .digit{display:block;width:.7em;height:1em;overflow:hidden;text-align:center}
#inc03 .area-count ul li dl dd .count .digit .digit_list{display:block;transition:transform 2.5s cubic-bezier(.2,.8,.2,1)}
#inc03 .area-count ul li dl dd .count .digit .digit_list i{display:block;height:1em;line-height:1em;font-style:normal}
#inc03 .area-count ul li .desc-box{position:relative}
#inc03 .area-count ul li .desc-box i{flex-shrink:0;position:absolute;top:calc(-100% - -4px);left:50%;transform:translateX(-50%);max-width:93px;width:100%;aspect-ratio:93 / 85}
#inc03 .area-count ul li .desc-box i img{width:100%;height:100%;object-fit:cover}
#inc03 .area-count ul li .desc-box p{padding:16px 30px;font-size:15px;font-weight:600;line-height:1.3;white-space:pre-line;word-break:keep-all;background-color:rgba(255,255,255,0.15);border-radius:100px}

/* 반응형 [s] */
@media (max-width:1600px){
#inc03{padding-top:160px}
#inc03 .group-title{padding-bottom:80px}
#inc03 .group-title::before{font-size:76px;top:-45px}
#inc03 .area-marquee{--x:-3435px;--xReverse:-3230px}
#inc03 .area-marquee .marquee-container{gap:25px}
#inc03 .area-marquee .marquee-wrapper ul li{width:155px}
#inc03 .area-count ul li{gap:82px}
#inc03 .area-count ul li dl{gap:14px}
#inc03 .area-count ul li dl dd{font-size:36px}
}
@media (max-width:1400px){
#inc03{padding-top:140px}
#inc03 .group-title{gap:40px;padding-bottom:60px}
#inc03 .group-title::before{font-size:70px}
#inc03 .group-title .desc{font-size:18px}
}
@media (max-width:1200px){
#inc03{padding-top:120px}
#inc03 .group-title{gap:34px}
#inc03 .group-title::before{top:-40px;font-size:66px}
#inc03 .area-marquee{--x:-3037px;--xReverse:-2856px;--gap:40px}
#inc03 .area-marquee .marquee-container{padding-bottom:50px}
#inc03 .area-marquee .marquee-wrapper ul li{width:140px}
#inc03 .area-count{padding:85px 0 90px}
#inc03 .area-count ul li{padding:0 60px}
#inc03 .area-count ul li dl{gap:10px}
#inc03 .area-count ul li dl dt{font-size:18px}
#inc03 .area-count ul li dl dd{font-size:32px} 
}
@media (max-width:1024px){
#inc03{padding-top:100px}
#inc03 .group-title{gap:24px;padding-bottom:50px}
#inc03 .group-title::before{top:-38px;font-size:60px}
#inc03 .group-title .desc{font-size:16px}
#inc03 .area-count{padding:75px 0 80px}
#inc03 .area-count ul li{padding:0 18px}
#inc03 .area-count ul li dl dt{font-size:16px}
#inc03 .area-count ul li dl dd{font-size:28px}
#inc03 .area-count ul li .desc-box i{top:calc(-100% - -12px);max-width:84px}
}
@media (max-width:768px){
#inc03{padding-top:80px}
#inc03 .group-title{gap:20px;padding-bottom:40px}
#inc03 .group-title::before{top:-35px;font-size:54px}
#inc03 .group-title .desc{font-size:15px}
#inc03 .area-marquee{--x:-2600px;--xReverse:-2445px;--gap:35px}
#inc03 .area-marquee .marquee-container{gap:18px;padding-bottom:38px}
#inc03 .area-marquee .marquee-container::before, #inc03 .area-marquee .marquee-container::after{width:100px}
#inc03 .area-marquee .marquee-wrapper ul li{width:120px}
#inc03 .area-count{padding:50px 0 55px}
#inc03 .area-count ul{flex-direction:column;align-items:center;width:90%}
#inc03 .area-count ul li{flex-direction:row;justify-content:space-between;gap:20px;width:100%;padding:28px 0}
#inc03 .area-count ul li:first-child{padding-top:0}
#inc03 .area-count ul li:last-child{padding-bottom:0}
#inc03 .area-count ul li:not(:last-child)::after{width:100%;height:1px;top:100%;right:50%;transform:translateX(50%)}
#inc03 .area-count ul li dl{align-items:flex-start;text-align:left;gap:4px;max-width:155px;width:100%}
#inc03 .area-count ul li dl dd{font-size:25px}
#inc03 .area-count ul li .desc-box{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 30px;background-color:rgba(255, 255, 255, 0.15);border-radius:100px}
#inc03 .area-count ul li .desc-box i{position:static;transform:none;max-width:74px}
#inc03 .area-count ul li .desc-box p{background-color:unset;padding:0;border-radius:0}
}
@media (max-width:580px){
#inc03 .area-count ul li{flex-direction:column;gap:12px}
#inc03 .area-count ul li dl{align-items:center;max-width:none;text-align:center}
#inc03 .area-count ul li .desc-box{padding:8px 30px}
}
@media (max-width:480px){
#inc03 .mo{display:block}
#inc03 .group-title .tit--l{white-space:normal !important}
#inc03 .group-title{padding:0 20px 36px}
#inc03 .group-title::before{top:-26px}
#inc03 .group-title .desc{font-size:14px}
#inc03 .area-marquee{--x:-1884px;--xReverse:-1772px;--gap:20px}
#inc03 .area-marquee .marquee-wrapper ul li{width:92px}
#inc03 .area-count ul li{padding:22px 0}
#inc03 .area-count ul li dl dd{font-size:22px}
#inc03 .area-count ul li .desc-box{padding:8px 20px;border-radius:10px}
#inc03 .area-count ul li .desc-box p{font-size:14px}
#inc03 .area-count ul li .desc-box i{max-width:64px} 
}
/* 반응형 [e] */