@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,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}

/* default */
#inc03 .group-cont ul li:first-child .link-page{transform:translateX(calc(35px *2))}
#inc03 .group-cont ul li:nth-child(2) .link-page{transform:translateX(35px)}
#inc03 .group-cont ul li:nth-child(4) .link-page{transform:translateX(-35px)}
#inc03 .group-cont ul li:last-child .link-page{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 15s 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;white-space:nowrap}
@keyframes inc03Marquee {0%{transform:translateX(-4195px)} 100% {transform:translateX(-2097.5px)}}