@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:1px solid var(--brand-color);border-radius:100%;background-color:var(--dark-color);color:var(--brand-color);transform:translateZ(0);will-change:transform;transition:transform .3s linear,width .25s linear,height .25s linear,background-color .2s linear,color .2s linear}
#inc03 .group-cont .link-page p.desc{overflow:hidden;height:0;padding:0;opacity:0;visibility:hidden;transition:height .1s linear,opacity .3s linear,visibility .1s linear}
#inc03 .group-cont .link-page .page-tit{display:flex;align-items:center;font-size:22px;transform:rotate(90deg);transition:transform .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 .3s linear,visibility .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(70px)}
#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(-70px)}

/* hover */
#inc03 .group-cont .link-page:hover{width:418px;height:418px;background-color:var(--brand-color);color:var(--text-color)}
#inc03 .group-cont .link-page:hover .page-tit{transform:rotate(0)}
#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{width:80%;max-width:320px;height:auto;padding:0 0 40px;overflow:visible;opacity:1;visibility:visible;line-height:1.7;word-break:keep-all;color:rgba(37,36,31,0.8)}

/* marquee */
#inc03 .marquee-area{position:relative;width:100%;overflow:hidden}
#inc03 .marquee{overflow:hidden}
#inc03 .marquee-scroll{width:max-content}
#inc03 .marquee-scroll ul{display:flex;gap:50px;flex-wrap:nowrap;width:max-content}
#inc03 .marquee-scroll ul li{flex:none;font-family:var(--e-font);font-size:110px;line-height:1.2;color:var(--brand-color);white-space:nowrap}
#inc03 .marquee-top .marquee-scroll{animation:inc03MarqueeRight var(--marquee-duration,40s) linear infinite}

@keyframes inc03MarqueeRight{
0%{transform:translateX(-50%)}
100%{transform:translateX(0)}
}

/* 반응형 [s] */
@media (max-width:1400px){
#inc03{padding:0 15px}
#inc03 h2{font-size:34px}
#inc03 p.desc{padding:45px 0 120px}
#inc03 .group-cont ul{padding-bottom:180px}
#inc03 .group-cont .link-page{width:195px;height:380px}
#inc03 .group-cont .link-page:hover{width:380px;height:380px}
#inc03 .marquee-scroll ul li{font-size:100px}
}

@media (max-width:1200px){
#inc03 h2{font-size:32px}
#inc03 p.desc{padding:35px 0 80px}
#inc03 .group-cont ul{flex-direction:column;align-items:center;padding-bottom:100px}
#inc03 .group-cont ul li{display:flex;justify-content:center;width:100%;max-width:560px}
#inc03 .group-cont ul li:first-child{transform:translateY(80px)}
#inc03 .group-cont ul li:nth-child(2){transform:translateY(40px)}
#inc03 .group-cont ul li:nth-child(4){transform:translateY(-40px)}
#inc03 .group-cont ul li:last-child{transform:translateY(-80px)}
#inc03 .group-cont .link-page,
#inc03 .group-cont .link-page:hover{width:100%;height:190px}
#inc03 .group-cont .link-page p.desc{height:auto;padding:0 30px 8px;opacity:1;visibility:visible;font-size:15px;line-height:1.7;color:var(--brand-color)}
#inc03 .group-cont ul li:nth-child(2) .link-page p.desc,
#inc03 .group-cont ul li:nth-child(3) .link-page p.desc{max-width:400px;word-break:keep-all}
#inc03 .group-cont .link-page .page-tit{font-size:17px;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:-12px}
#inc03 .group-cont .link-page .page-tit::after{right:-12px}
#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:20px 0 60px;font-size:15px}
#inc03 .group-cont ul{padding-bottom:70px}
#inc03 .group-cont ul li{max-width:440px}
#inc03 .group-cont ul li:first-child{transform:translateY(64px)}
#inc03 .group-cont ul li:nth-child(2){transform:translateY(32px)}
#inc03 .group-cont ul li:nth-child(4){transform:translateY(-32px)}
#inc03 .group-cont ul li:last-child{transform:translateY(-64px)}
#inc03 .group-cont .link-page,
#inc03 .group-cont .link-page:hover{height:165px}
#inc03 .group-cont .link-page p.desc{padding:0 20px 6px;font-size:14px}
#inc03 .group-cont .link-page .page-tit{font-size:15px}
#inc03 .marquee-area{margin-left:-15px;width:calc(100% + 30px)}
#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:15px 0 45px;font-size:14px}
#inc03 .group-cont ul{padding-bottom:50px}
#inc03 .group-cont ul li{max-width:none}
#inc03 .group-cont ul li:first-child{transform:translateY(52px)}
#inc03 .group-cont ul li:nth-child(2){transform:translateY(26px)}
#inc03 .group-cont ul li:nth-child(4){transform:translateY(-26px)}
#inc03 .group-cont ul li:last-child{transform:translateY(-52px)}
#inc03 .group-cont .link-page,
#inc03 .group-cont .link-page:hover{height:145px}
#inc03 .group-cont .link-page p.desc{padding:0 15px 5px;font-size:13px}
#inc03 .group-cont .link-page .page-tit{font-size:14px}
#inc03 .marquee-scroll ul li{font-size:42px}
}
/* 반응형 [e] */