@charset "utf-8";

#inc03{position:relative;overflow:hidden}

#inc03 h2{font-family:var(--e-font);font-size:36px;font-weight:normal;text-align:center}
#inc03 p.desc{padding:55px 0 150px;font-family:var(--k-font);font-size:16px;white-space:pre-line;text-align:center}
#inc03 .group-cont ul{display:flex;justify-content:center;padding-bottom:235px}
#inc03 .group-cont .link-page{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:210px;height:418px;border-radius:100%;color:var(--brand-color);border:1px solid var(--brand-color);background-color:#111;transform:translateZ(0);will-change:transform;transition:transform 0.3s linear, width 0.25s linear, height 0.25s linear,background-color 0.2s linear,color 0.2s linear}
#inc03 .group-cont .link-page p.desc{overflow:hidden;height:0;opacity:0;visibility:hidden;padding:0;transition:height 0.1s linear, opacity 0.3s linear, visibility 0.1s linear}
#inc03 .group-cont .link-page .page-tit{display:flex;align-items:center;font-size:22px;transform:rotate(90deg);transition:transform 0.3s linear}
#inc03 .group-cont .link-page .page-tit::before, #inc03 .group-cont .link-page .page-tit::after{position:absolute;opacity:0;visibility:hidden;transition:opacity 0.3s linear, visibility 0.1s linear}
#inc03 .group-cont .link-page .page-tit::before{content:"[";left:-15px}
#inc03 .group-cont .link-page .page-tit::after{content:"]";right:-15px}

/* circle default */
#inc03 .group-cont ul li:first-child {transform:translateX(calc(35px *2))}
#inc03 .group-cont ul li:nth-child(2) {transform:translateX(35px)}
#inc03 .group-cont ul li:nth-child(4) {transform:translateX(-35px)}
#inc03 .group-cont ul li:last-child {transform:translateX(calc(-35px * 2))}
/* hover */
#inc03 .group-cont .link-page:hover{width:418px;background-color:var(--brand-color);color:#111}
#inc03 .group-cont .link-page:hover .page-tit{transform:rotate(0deg)}
#inc03 .group-cont .link-page:hover .page-tit::before, #inc03 .group-cont .link-page:hover .page-tit::after{opacity:1;visibility:visible}
#inc03 .group-cont .link-page:hover p.desc{height:max-content;opacity:1;visibility:visible;padding:0 0 40px;color:rgba(17,17,17,0.8)}

/* marquee */
#inc03 .marquee-scroll{animation:inc03Marquee 17s linear infinite}
#inc03 .marquee-scroll ul{display:flex;gap:50px;flex-wrap:nowrap}
#inc03 .marquee-scroll ul li{font-family:var(--e-font);font-size:110px;line-height:1.2;white-space:nowrap}
@keyframes inc03Marquee {0%{transform:translateX(-4195px)} 100% {transform:translateX(-2097.5px)}}
@keyframes inc03MarqueePC {0%{transform:translateX(-3842px)} 100% {transform:translateX(-1930.5px)}}
@keyframes inc03MarqueeTbLand {0%{transform:translateX(-3887px)} 100% {transform:translateX(-1299.2px)}}
@keyframes inc03MarqueeTbPort {0%{transform:translateX(-3642px)} 100% {transform:translateX(-913.5px)}}
@keyframes inc03MarqueeMO {0%{transform:translateX(-3200px)} 100% {transform:translateX(-806.5px)}}

/* 반응형 [s] */
@media (max-width:1400px){
#inc03{padding:0 15px}
#inc03 .group-cont ul{padding-bottom:180px}
#inc03 .group-cont .link-page{height:380px}
#inc03 .group-cont .link-page:hover{width:380px}
#inc03 .marquee-scroll{animation:inc03MarqueePC 14s linear infinite}
#inc03 .marquee-scroll ul li{font-size:100px}
}
@media (max-width:1200px){
#inc03 h2{font-size:32px}
#inc03 p.desc{padding:30px 0 100px}
#inc03 .group-cont .link-page{width:180px;height:340px}
#inc03 .group-cont .link-page .page-tit{font-size:18px}
#inc03 .group-cont .link-page:hover{width:340px}
#inc03 .group-cont .link-page:hover p.desc{padding:0 0 20px;font-size:15px}
}
@media (max-width:1024px){
#inc03 h2{font-size:28px}
#inc03 p.desc{padding:20px 0 80px;font-size:15px}
#inc03 .group-cont ul{padding-bottom:100px}
#inc03 .group-cont .link-page{width:140px;height:280px}
#inc03 .group-cont .link-page:hover{width:280px}
#inc03 .group-cont .link-page .page-tit{font-size:16px}
#inc03 .marquee-scroll{animation:inc03MarqueeTbLand 24s linear infinite}
#inc03 .marquee-scroll ul{gap:28px}
#inc03 .marquee-scroll ul li{font-size:68px}
}
@media (max-width:768px){
#inc03 h2{font-size:26px}
#inc03 p.desc{padding:12px 0 0}
#inc03 .group-cont ul{flex-direction:column;align-items:center;justify-content:flex-start;padding-bottom:0}
#inc03 .group-cont ul li{display:flex;justify-content:center;max-width:380px;width:100%}
#inc03 .group-cont ul li:first-child {transform:translateY(calc(30px *2))}
#inc03 .group-cont ul li:nth-child(2) {transform:translateY(30px)}
#inc03 .group-cont ul li:nth-child(4) {transform:translateY(-30px)}
#inc03 .group-cont ul li:last-child {transform:translateY(calc(-30px * 2))}
#inc03 .group-cont .link-page{width:100%;height:170px}
#inc03 .group-cont .link-page p.desc{height:auto;opacity:1;visibility:visible;padding:0 0 4px;font-size:14px;color:var(--brand-color)}
#inc03 .group-cont .link-page .page-tit{font-size:15px;transform:rotate(0)}
#inc03 .group-cont .link-page .page-tit::before, #inc03 .group-cont .link-page .page-tit::after{opacity:1;visibility:visible}
#inc03 .group-cont .link-page .page-tit::before{left:-10px}
#inc03 .group-cont .link-page .page-tit::after{right:-10px}
#inc03 .group-cont .link-page:hover{width:100%;height:170px;background-color:var(--brand-color);color:#111}
#inc03 .group-cont .link-page:hover p.desc{padding:0 0 4px;font-size:14px}
#inc03 .marquee-scroll{animation:inc03MarqueeTbPort 28s linear infinite}
#inc03 .marquee-scroll ul{gap:16px}
#inc03 .marquee-scroll ul li{font-size:48px}
}
@media (max-width:480px){
#inc03 h2{font-size:22px}
#inc03 p.desc{padding:5px 0 0;font-size:14px}
#inc03 .group-cont ul li{max-width:none}
#inc03 .group-cont .link-page{height:164px}
#inc03 .group-cont .link-page:hover{height:164px}
#inc03 .marquee-scroll{animation:inc03MarqueeMO 30s linear infinite}
#inc03 .marquee-scroll ul li{font-size:42px}
}
/* 반응형 [e] */