@charset "utf-8";
/* ============================================================
   메인 (index.php 에서만 로드)
   01 히어로 / 02 키워드 띠 / 03 소개 문장 / 04 서비스 / 05 숫자 / 06 비전·미션 / 07 포트폴리오 / 08 진행 방식 / 09 뉴스 / 10 문의
   ============================================================ */
/* 01 히어로 */
.hero {padding: 10rem 0 12rem;background: var(--paper);overflow: clip;}
.hero-tt {margin-top: 4rem;font-size: var(--fs-display);font-weight: 800;line-height: 1.04;letter-spacing: var(--ls-tight);}
.roll {display: inline-block;height: 1.04em;overflow: hidden;vertical-align: top;color: var(--accent);}
.roll-list {display: block;animation: roll 9s var(--ease) infinite;}
.roll-list b {display: block;height: 1.04em;font-weight: 800;}
@keyframes roll {0%, 26% {translate: 0 0;} 33%, 59% {translate: 0 -1.04em;} 66%, 92% {translate: 0 -2.08em;} 100% {translate: 0 -3.12em;}}
.hero-bot {display: flex;align-items: flex-end;justify-content: space-between;gap: 4rem;margin-top: 8rem;}
.hero-lead {max-width: 64rem;font-size: var(--fs-lead);line-height: 1.75;color: var(--mute);}
.hero-grid {display: grid;grid-template-columns: 7fr 5fr;grid-template-rows: 1fr 1fr;gap: 2rem;height: 72rem;margin-top: 10rem;}
.hero-grid figure {position: relative;overflow: hidden;background: var(--line);}
.hero-grid img {width: 100%;height: 100%;object-fit: cover;}
.hg-a {grid-row: 1 / 3;}
/* 02 키워드 띠 */
.marquee {overflow: hidden;background: var(--ink);color: var(--paper);}
.mq-track {display: flex;width: max-content;animation: mq 36s linear infinite;}
.mq-track ul {display: flex;flex: none;}
.mq-track li {display: flex;align-items: center;gap: 4rem;padding: 3.2rem 4rem 3.2rem 0;font-size: clamp(3.6rem, 5vw, 7.2rem);font-weight: 800;letter-spacing: var(--ls-tight);text-transform: uppercase;white-space: nowrap;}
.mq-track li::after {content: '✦';font-size: .5em;color: var(--accent);}
.marquee:hover .mq-track {animation-play-state: paused;}
@keyframes mq {to {translate: -50% 0;}}
/* 03 소개 문장 */
.statement {padding: 18rem 0 16rem;}
.st-tx {max-width: 150rem;margin-top: 4rem;font-size: clamp(3.4rem, 5vw, 8rem);font-weight: 700;line-height: 1.22;letter-spacing: -.04em;}
.st-tx em {color: var(--accent);}
.st-meta {display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 4rem;margin-top: 10rem;padding-top: 3rem;border-top: .1rem solid var(--ink);}
.st-meta li {display: flex;flex-direction: column;gap: 1.2rem;}
.st-meta b {font-size: var(--fs-label);font-weight: 700;letter-spacing: var(--ls-label);color: var(--accent);}
.st-meta span {font-size: var(--fs-h3);font-weight: 700;line-height: 1.3;letter-spacing: -.02em;}
/* 04 서비스 */
.svc {position: relative;padding: 14rem 0;background: #fff;}
.svc-list {border-top: .1rem solid var(--ink);}
.svc-item a {display: grid;grid-template-columns: 8rem minmax(0, 1.2fr) minmax(0, 1fr) 6rem;gap: 3rem;align-items: center;padding: 4.4rem 0;border-bottom: .1rem solid var(--line);transition: padding .5s var(--ease), background .3s;}
.svc-item .no {font-size: var(--fs-small);font-weight: 700;color: var(--accent);}
.svc-item .tt {font-size: var(--fs-h2);font-weight: 800;line-height: 1.08;letter-spacing: var(--ls-tight);transition: color .3s;}
.svc-item .tt small {display: block;margin-top: 1rem;font-size: var(--fs-small);font-weight: 500;letter-spacing: 0;color: var(--mute);}
.svc-item .ds {font-size: var(--fs-body);line-height: 1.7;color: var(--mute);}
.svc-item .ds em {display: block;margin-top: 1.2rem;font-size: var(--fs-small);font-weight: 700;color: var(--ink);}
.svc-item .ar {display: grid;place-items: center;width: 6rem;height: 6rem;border: .1rem solid var(--ink);border-radius: 50%;font-size: 2.4rem;transition: background .3s, rotate .4s var(--ease), color .3s;}
.svc-item a:hover, .svc-item a:focus-visible {padding-left: 2.4rem;}
.svc-item a:hover .tt, .svc-item a:focus-visible .tt {color: var(--accent);}
.svc-item a:hover .ar, .svc-item a:focus-visible .ar {rotate: 45deg;background: var(--accent);border-color: var(--accent);}
.svc-pv {position: fixed;left: 0;top: 0;z-index: 80;width: 36rem;aspect-ratio: 4 / 3;overflow: hidden;background: var(--ink);pointer-events: none;opacity: 0;scale: .85;transition: opacity .25s, scale .35s var(--ease);}
.svc-pv.is-on {opacity: 1;scale: 1;}
.svc-pv img {width: 100%;height: 100%;object-fit: cover;}
/* 05 숫자 */
.num {padding: 16rem 0 12rem;background: var(--ink);color: var(--paper);}
.num .label-h {display: block;}
.num-list {display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 4rem;margin-top: 8rem;}
.num-list li {padding-top: 3rem;border-top: .1rem solid rgba(255, 255, 255, .3);}
.num-list .n {display: flex;align-items: flex-start;gap: .6rem;font-size: clamp(8rem, 12vw, 20rem);font-weight: 800;line-height: 1;letter-spacing: -.06em;}
.num-list .n i {margin-top: .12em;font-size: .42em;color: var(--accent);letter-spacing: 0;}
.num-list p {margin-top: 2rem;font-size: var(--fs-lead);font-weight: 500;color: rgba(255, 255, 255, .75);}
.num-note {margin-top: 8rem;font-size: var(--fs-small);color: rgba(255, 255, 255, .5);}
/* 06 비전·미션 */
.vm {display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));}
.vm-p {position: relative;display: flex;align-items: flex-end;min-height: 80rem;overflow: hidden;color: #fff;}
.vm-p img {position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;filter: brightness(.6);transition: scale 1.2s var(--ease), filter .6s;}
.vm-p:hover img {scale: 1.06;filter: brightness(.75);}
.vm-tx {position: relative;z-index: 2;padding: 6rem var(--page-gutter) 7rem;}
.vm-tx h3 {margin: 2.4rem 0;font-size: var(--fs-h2);font-weight: 800;line-height: 1.18;letter-spacing: var(--ls-tight);}
.vm-tx p:last-child {font-size: var(--fs-lead);color: rgba(255, 255, 255, .8);}
/* 07 포트폴리오 */
.wk {padding: 16rem 0 12rem;background: var(--paper);}
.wk-grid {display: grid;grid-template-columns: repeat(12, minmax(0, 1fr));gap: 8rem 4rem;}
.wk-grid li:nth-child(1) {grid-column: 1 / 8;}
.wk-grid li:nth-child(2) {grid-column: 9 / 13;margin-top: 14rem;}
.wk-grid li:nth-child(3) {grid-column: 2 / 6;}
.wk-grid li:nth-child(4) {grid-column: 7 / 13;margin-top: 10rem;}
.wk-grid figure {overflow: hidden;aspect-ratio: 4 / 3;background: var(--line);}
.wk-grid li:nth-child(2) figure, .wk-grid li:nth-child(3) figure {aspect-ratio: 4 / 5;}
.wk-grid img {width: 100%;height: 100%;object-fit: cover;}
.wk-cap {display: flex;align-items: baseline;gap: 2rem;padding: 2.4rem 0 2rem;border-bottom: .1rem solid var(--line);}
.wk-cap span {font-size: var(--fs-small);font-weight: 700;color: var(--accent);}
.wk-cap h3 {flex: 1;font-size: var(--fs-h3);font-weight: 700;line-height: 1.3;letter-spacing: -.02em;transition: color .3s;}
.wk-cap small {display: block;font-size: var(--fs-small);font-weight: 500;color: var(--mute);}
.wk-cap i {font-size: 2.4rem;transition: translate .3s var(--ease), color .3s;}
.wk-grid a:hover .wk-cap i, .wk-grid a:focus-visible .wk-cap i {translate: .6rem -.6rem;color: var(--accent);}
.wk-grid a:hover h3 {color: var(--accent);}
/* 08 진행 방식 */
.pr {padding: 12rem 0 16rem;background: var(--paper);}
.pr-list {display: grid;grid-template-columns: repeat(4, minmax(0, 1fr));margin-top: 6rem;border-top: .1rem solid var(--ink);}
.pr-list li {padding: 4rem 3rem 5rem 0;}
.pr-list li + li {padding-left: 3rem;border-left: .1rem solid var(--line);}
.pr-no {display: block;margin-bottom: 4rem;font-size: clamp(6rem, 7vw, 11rem);font-weight: 800;line-height: 1;letter-spacing: -.05em;color: transparent;-webkit-text-stroke: .1rem var(--ink);transition: color .3s;}
.pr-list li:hover .pr-no {color: var(--accent);-webkit-text-stroke-color: var(--accent);}
.pr-list h3 {font-size: var(--fs-h3);font-weight: 800;letter-spacing: -.02em;}
.pr-list h3 small {display: block;margin-top: .6rem;font-size: var(--fs-small);font-weight: 500;color: var(--mute);}
.pr-list p {margin-top: 2rem;font-size: var(--fs-body);line-height: 1.7;color: var(--mute);}
/* 09 뉴스 */
.ins {padding: 12rem 0 16rem;background: #fff;}
.ins-list {border-top: .1rem solid var(--ink);}
.ins-list a {display: grid;grid-template-columns: 16rem minmax(0, 1fr) 14rem 4rem;gap: 3rem;align-items: center;padding: 3.4rem 0;border-bottom: .1rem solid var(--line);transition: padding .4s var(--ease), color .3s;}
.ins-list .cate {font-size: var(--fs-label);font-weight: 700;letter-spacing: var(--ls-label);text-transform: uppercase;color: var(--accent);}
.ins-list .tt {font-size: var(--fs-h3);font-weight: 700;line-height: 1.3;letter-spacing: -.02em;}
.ins-list .date {font-size: var(--fs-small);color: var(--mute);}
.ins-list .ar {font-size: 2.4rem;text-align: right;transition: translate .3s var(--ease);}
.ins-list a:hover, .ins-list a:focus-visible {padding-left: 2rem;color: var(--accent);}
.ins-list a:hover .ar {translate: .4rem -.4rem;}
/* 10 문의 */
.cta-big-sec {padding: 14rem 0;background: var(--accent);color: var(--ink);overflow: clip;}
@media (max-width: 1280px) {
.svc-item a {grid-template-columns: 6rem minmax(0, 1fr) 6rem;}
.svc-item .ds {grid-column: 2;grid-row: 2;}
.svc-item .ar {grid-row: 1 / 3;grid-column: 3;}
.svc-pv {display: none;}
.pr-list {grid-template-columns: repeat(2, minmax(0, 1fr));}
.pr-list li:nth-child(3) {padding-left: 0;border-left: 0;}
.pr-list li:nth-child(n+3) {border-top: .1rem solid var(--line);}
}
@media (max-width: 1024px) {
.hero {padding: 6rem 0 8rem;}
.hero-bot {flex-direction: column;align-items: flex-start;margin-top: 5rem;}
.hero-grid {height: 52rem;margin-top: 6rem;}
.statement {padding: 10rem 0;}
.st-meta {grid-template-columns: 1fr;gap: 3rem;margin-top: 6rem;}
.svc, .num, .wk {padding-block: 9rem;}
.num-list {grid-template-columns: 1fr;gap: 5rem;margin-top: 5rem;}
.vm {grid-template-columns: 1fr;}
.vm-p {min-height: 56rem;}
.wk-grid {gap: 6rem 3rem;}
.wk-grid li:nth-child(1) {grid-column: 1 / 13;}
.wk-grid li:nth-child(2) {grid-column: 1 / 7;margin-top: 0;}
.wk-grid li:nth-child(3) {grid-column: 7 / 13;}
.wk-grid li:nth-child(4) {grid-column: 1 / 13;margin-top: 0;}
.pr {padding-block: 9rem;}
.ins {padding-block: 9rem;}
.ins-list a {grid-template-columns: 12rem minmax(0, 1fr) 4rem;gap: 1.6rem 2rem;}
.ins-list .date {grid-column: 2;grid-row: 2;}
.ins-list .ar {grid-column: 3;grid-row: 1 / 3;}
.cta-big-sec {padding: 9rem 0;}
}
@media (max-width: 768px) {
.hero-tt {margin-top: 3rem;}
.hero-grid {grid-template-columns: 1fr;grid-template-rows: auto;height: auto;margin-top: 4rem;}
.hero-grid figure {aspect-ratio: 4 / 3;}
.hg-a {grid-row: auto;}
.hg-b, .hg-c {display: none;}
.sec-head {flex-direction: column;align-items: flex-start;margin-bottom: 4rem;}
.svc-item a {grid-template-columns: 4.4rem minmax(0, 1fr);padding: 3rem 0;gap: 1.2rem 1.6rem;}
.svc-item .ar {display: none;}
.svc-item .tt {font-size: 3.2rem;}
.vm-p {min-height: 46rem;}
.wk-grid {grid-template-columns: 1fr;gap: 5rem;}
.wk-grid li:nth-child(n) {grid-column: auto;margin-top: 0;}
.wk-grid li:nth-child(n) figure {aspect-ratio: 4 / 3;}
.pr-list {grid-template-columns: 1fr;}
.pr-list li:nth-child(n) {padding: 3rem 0 4rem;border-left: 0;border-top: .1rem solid var(--line);}
.pr-list li:first-child {border-top: 0;}
.ins-list a {grid-template-columns: minmax(0, 1fr) 3rem;padding: 2.6rem 0;}
.ins-list .cate {grid-column: 1;}
.ins-list .tt {grid-column: 1;font-size: 2.2rem;}
.ins-list .date {grid-column: 1;grid-row: auto;}
.ins-list .ar {grid-column: 2;grid-row: 1 / 4;}
.cta-big {font-size: clamp(4.4rem, 12vw, 8rem);}
}