@charset "utf-8";

#inc04{overflow:hidden}
#inc04 .area-board{padding:195px 0 155px}
#inc04 .group-tit h2{font-family:var(--e-font);letter-spacing:-0.5px;padding-bottom:60px !important}
#inc04 .group-cont .tab-list{display:flex;gap:24px;padding-bottom:30px}
#inc04 .group-cont .tab-list li button{all:unset;font-family:var(--e-font);font-size:18px;font-weight:700;color:rgba(0,0,0,0.2);cursor:pointer}
#inc04 .group-cont .tab-list li button.on{color:#111}
#inc04 .group-cont .tab-cont{display:grid}
#inc04 .group-cont .tab-view{grid-area:1 /1;opacity:0;visibility:hidden;transition:opacity 0.4s ease,visibility 0s linear 0.4s}
#inc04 .group-cont .tab-view.on{opacity:1;visibility:visible;transition:opacity 0.4s ease,visibility 0s linear 0s}
#inc04 .group-cont .tab-view ul{border-top:1px solid #000}
#inc04 .group-cont .tab-view ul li a{position:relative;display:flex;align-items:center;height:70px;padding:0 30px 0 40px;border-bottom:1px solid #000}
#inc04 .group-cont .tab-view ul li a > *{position:relative;z-index:1}
#inc04 .group-cont .tab-view ul li a span.date{font-size:15px;color:#888;max-width:180px;width:100%;transition:color 0.4s ease}
#inc04 .group-cont .tab-view ul li a span.cate{max-width:300px;width:100%;font-family:var(--e-font);font-size:13px;font-weight:700;color:#000;letter-spacing:-0.5px;transition:color 0.4s ease}
#inc04 .group-cont .tab-view ul li a h3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;flex:1;font-size:20px;font-weight:700;color:#000;transition:color 0.4s ease}
.inc04-thumb{opacity:0;pointer-events:none;width:0;overflow:hidden}
.inc04-thumb.is-following{position:fixed;top:0;left:0;width:349px;aspect-ratio:349 / 427;overflow:hidden;pointer-events:none;opacity:0;transform:translate(-9999px, -9999px) scale(0.96);transition:opacity .15s ease;z-index:999;background:#111}
.inc04-thumb.is-following.is-visible{opacity:1}
.inc04-thumb.is-following img{width:100%;height:100%;object-fit:cover;object-position:top}

/* marquee */
#inc04 .marquee-container{--x:-3810.63px;--gap:60px;position:relative;z-index:-1;display:flex;flex-direction:column;gap:20px}
#inc04 .marquee-wrapper{display:flex;gap:var(--gap);animation:logoMarquee 50s linear infinite}
#inc04 .marquee-wrapper ul{display:flex;flex-wrap:nowrap;gap:var(--gap);flex-shrink:0}
#inc04 .marquee-wrapper ul li{display:flex;align-items:center;gap:var(--gap);font-family:var(--e-font);font-size:30px;font-weight:700;color:rgba(0, 0, 0, 0.2);letter-spacing:-0.5px}
#inc04 .marquee-wrapper ul li .thumb-box{display:flex;max-width:146px;width:100%;aspect-ratio:149 / 99;overflow:hidden}
#inc04 .marquee-wrapper ul li .thumb-box img{width:100%;height:100%;object-fit:cover}
#inc04 .marquee-wrapper.reverse{animation:logoMarquee 50s linear reverse infinite}
#inc04 .marquee-wrapper.reverse ul li{color:#000}
#inc04 .marquee-wrapper.reverse ul li .thumb-box{aspect-ratio:146 / 85}

@media (hover:hover){
#inc04 .group-cont .tab-view ul li a.hover-bg::before{transition-duration:0.6s}
#inc04 .group-cont .tab-view ul li a.hover-bg:hover::before{transform:scaleX(1) translateZ(0)}
#inc04 .group-cont .tab-view ul li a:hover > * {color:#fff !important}
}

@keyframes logoMarquee{
0%{transform:translateX(0)}
100%{transform:translateX(var(--x))}
}

/* 반응형 [s] */
@media (max-width:1800px){
#inc04 .area-board{padding:160px 20px 140px}
}
@media (max-width:1600px){
#inc04 .group-tit h2{padding-bottom:45px !important}
#inc04 .area-board{padding:120px 20px 110px}
#inc04 .group-cont .tab-view ul li a h3{font-size:18px}
.inc04-thumb.is-following{width:300px}
#inc04 .marquee-container{--x:-3152.88px;--gap:30px}
#inc04 .marquee-wrapper ul li{font-size:26px}
#inc04 .marquee-wrapper ul li .thumb-box{max-width:138px}
}
@media (max-width:1400px){
#inc04 .group-tit h2{padding-bottom:35px !important}
#inc04 .area-board{padding:100px 20px 90px}
#inc04 .group-cont .tab-view ul li a{padding:0 26px 0 22px}
#inc04 .group-cont .tab-view ul li a span.date{max-width:145px}
#inc04 .group-cont .tab-view ul li a span.cate{max-width:130px}
#inc04 .group-cont .tab-view ul li a h3{font-size:17px}
}
@media (max-width:1200px){
#inc04 .area-board{padding:80px 20px 70px}
#inc04 .group-tit h2{padding-bottom:24px !important}
#inc04 .group-cont .tab-list{padding-bottom:25px}
#inc04 .group-cont .tab-list li button{font-size:17px}
.inc04-thumb.is-following{width:270px}
#inc04 .group-cont .tab-view ul li a span.date{max-width:135px;font-size:14px}
#inc04 .group-cont .tab-view ul li a span.cate{max-width:100px}
#inc04 .group-cont .tab-view ul li a h3{font-size:16px}
#inc04 .marquee-container{--x:-2690.13px}
#inc04 .marquee-wrapper ul li{font-size:22px}
#inc04 .marquee-wrapper ul li .thumb-box{max-width:115px}
}
@media (max-width:1024px){
#inc04 .group-tit h2{padding-bottom:20px !important}
#inc04 .group-cont .tab-list{justify-content:center}
#inc04 .group-cont .tab-view ul li a{padding:0 20px 0 22px}
#inc04 .group-cont .tab-view ul li a span.date{max-width:115px;font-size:13px}
#inc04 .group-cont .tab-view ul li a span.cate{max-width:90px}
#inc04 .group-cont .tab-view ul li a h3{font-size:15px}
#inc04 .group-cont .tab-view ul li a svg{width:20px;height:20px;margin-left:10px}
.inc04-thumb.is-following{width:240px}
#inc04 .marquee-container{--x:-2306.25px;--gap:15px}
#inc04 .marquee-wrapper ul li{font-size:20px}
#inc04 .marquee-wrapper ul li .thumb-box{max-width:100px}
}
@media (max-width:820px){
#inc04 .group-cont .tab-view ul li a span.date{max-width:100px}
#inc04 .group-cont .tab-view ul li a span.cate{max-width:70px}
}
@media (max-width:580px){
#inc04 .area-board{padding:60px 20px 50px}
#inc04 .group-cont .tab-list li button{font-size:15px}
#inc04 .group-cont .tab-view ul li a span.date{display:none}
#inc04 .group-cont .tab-view ul li a span.cate{display:none}
#inc04 .marquee-container{--x:-1888.5px;--gap:10px;gap:15px}
#inc04 .marquee-wrapper ul li{font-size:16px}
#inc04 .marquee-wrapper ul li .thumb-box{max-width:86px}
}
@media (max-width:480px){
#inc04 .group-cont .tab-list{gap:20px}
#inc04 .group-cont .tab-view ul li a{height:60px;padding:0 12px 0 14px}
#inc04 .group-cont .tab-view ul li a h3{font-size:14px}
#inc04 .group-cont .tab-view ul li a svg{width:18px;height:18px}
}
/* 반응형 [e] */