@font-face {
	font-family:Pretendard;
	src:url('../fonts/PretendardVariable.woff2') format('woff2');
	font-weight:100 900;
	font-display:swap
}

:root {
	--paper:#f7f7f5;
	--ink:#101114;
	--muted:#65666d;
	--line:#d7d8db;
	--blue:#2855ff;
	--max:1440px
}

* {
	box-sizing:border-box
}

html {
	scroll-behavior:smooth;
	scroll-padding-top:100px
}

body {
	margin:0;
	background:var(--paper);
	color:var(--ink);
	font-family:Pretendard,'Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',Arial,sans-serif;
	font-size:16px;
	line-height:1.7;
	word-break:keep-all
}

button,input,textarea,select {
	font:inherit
}

button,a {
	-webkit-tap-highlight-color:transparent
}

a {
	color:inherit;
	text-decoration:none
}

button {
	cursor:pointer
}

img {
	max-width:100%;
	display:block
}

h1,h2,h3,p {
	margin:0
}

h1,h2,h3 {
	line-height:1.2;
	letter-spacing:-.045em
}

button:focus-visible,a:focus-visible,summary:focus-visible {
	outline:3px solid var(--blue);
	outline-offset:6px
}

::selection {
	background:var(--blue);
	color:#fff
}

.section {
	max-width:var(--max);
	margin:auto;
	padding:112px 64px
}

.eyebrow {
	font:600 13px/1.5 Arial,sans-serif;
	letter-spacing:.13em;
	margin-bottom:28px
}

.site-header {
	height:96px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:0 64px;
	border-bottom:1px solid var(--line);
	background:rgba(247,247,245,.96);
	position:relative;
	z-index:100
}

.wordmark {
	font-family:Arial,sans-serif;
	font-size:29px;
	font-weight:900;
	letter-spacing:-1.9px;
	line-height:1;
	display:inline-flex;
	align-items:center;
	white-space:nowrap
}

.wordmark span {
	font-weight:400
}

.wordmark i {
	width:7px;
	height:7px;
	background:var(--blue);
	margin:0 0 16px 5px
}

.site-header nav {
	display:flex;
	gap:34px;
	align-items:center;
	font-size:14px;
	font-weight:600
}

.site-header nav>a {
	position:relative
}

.site-header nav>a:not(.nav-cta):after {
	content:'';
	height:1px;
	width:0;
	position:absolute;
	bottom:-5px;
	left:0;
	background:var(--ink);
	transition:width .25s
}

.site-header nav>a:hover:after {
	width:100%
}

.nav-cta {
	padding:13px 19px;
	border:1px solid var(--ink);
	display:flex;
	gap:24px;
	transition:.25s
}

.nav-cta:hover {
	background:var(--ink);
	color:#fff
}

.menu-toggle {
	display:none
}

.skip-link {
	position:fixed;
	top:-100px;
	left:16px;
	z-index:999;
	background:var(--blue);
	color:white;
	padding:10px
}

.skip-link:focus {
	top:10px
}

.hero {
	padding:27px 64px 0;
	max-width:1600px;
	margin:auto;
	overflow:hidden
}

.hero-kicker {
	display:flex;
	justify-content:space-between;
	font:12px Arial,sans-serif;
	letter-spacing:.08em
}

.hero-content {
	position:relative;
	min-height:645px;
	display:flex;
	align-items:center
}

.hero-copy {
	position:relative;
	z-index:2;
	padding-top:55px;
	padding-bottom:65px;
	pointer-events:none
}

.hero-copy a {
	pointer-events:auto
}

.hero h1 {
	font-family:Arial,sans-serif;
	font-size:clamp(60px,7.65vw,116px);
	font-weight:800;
	line-height:.91;
	letter-spacing:-.075em;
	white-space:nowrap;
	margin-bottom:33px
}

.hero h1 span {
	color:var(--blue)
}

.hero h2 {
	font-size:33px;
	font-weight:650;
	line-height:1.35;
	letter-spacing:-.045em;
	margin-bottom:19px
}

.hero p {
	color:var(--muted);
	line-height:1.8;
	font-size:16px
}

.button {
	display:inline-flex;
	align-items:center;
	justify-content:space-between;
	gap:38px;
	padding:15px 23px;
	min-height:56px;
	border:1px solid var(--ink);
	font-size:15px;
	font-weight:550;
	transition:background .25s,color .25s
}

.button.solid {
	background:var(--ink);
	color:#fff;
	margin-top:26px
}

.button:hover {
	background:var(--blue);
	border-color:var(--blue);
	color:white
}

.button span {
	font-size:21px
}

.hero-art {
	position:absolute;
	right:-65px;
	top:33px;
	width:60%;
	height:570px;
	z-index:1
}

#halo-canvas {
	height:100%;
	width:100%;
	display:block
}

.art-label {
	position:absolute;
	right:48px;
	bottom:24px;
	display:flex;
	gap:22px;
	font:10px/1.45 Arial,sans-serif;
	letter-spacing:.11em
}

.art-cross {
	position:absolute;
	font-size:21px;
	font-weight:300;
	color:#797b83
}

.cross-one {
	top:7%;
	right:18%
}

.cross-two {
	bottom:18%;
	left:24%
}

.hero-bottom {
	display:flex;
	justify-content:space-between;
	align-items:center;
	border-top:1px solid var(--line);
	padding:23px 0
}

.hero-bottom p,.hero-bottom a {
	font:11px Arial,sans-serif;
	letter-spacing:.08em;
	color:var(--ink)
}

.hero-bottom span {
	margin-left:24px;
	font-size:17px
}

.ticker {
	overflow:hidden;
	background:var(--blue);
	color:#fff;
	padding:17px 0;
	white-space:nowrap
}

.ticker>div {
	display:inline-block;
	font:600 15px Arial,sans-serif;
	letter-spacing:.14em;
	animation:ticker 35s linear infinite
}

.ticker b {
	display:inline-block;
	margin:0 38px;
	font-size:24px;
	vertical-align:middle;
	font-weight:400
}

@keyframes ticker {
	to {
		transform:translateX(-33.333%)
	}
}

.section-heading {
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
	gap:40px;
	margin-bottom:55px
}

.section-heading h2 {
	font-size:48px;
	font-weight:650;
	line-height:1.22
}

.section-heading>div:last-child>p,.section-heading>p {
	color:var(--muted);
	font-size:16px;
	line-height:1.8
}

.text-link {
	display:inline-flex;
	justify-content:space-between;
	gap:40px;
	border-bottom:1px solid currentColor;
	padding:10px 0;
	font-size:14px;
	font-weight:600;
	margin-top:20px
}

.work-grid {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:65px 34px
}

.project-card {
	min-width:0;
	display:block
}

.project-card:nth-child(even) {
	padding-top:80px
}

.project-image {
	position:relative;
	height:420px;
	overflow:hidden;
	background:#e7e8eb;
	display:flex;
	align-items:center;
	justify-content:center
}

.project-image:after {
	content:'';
	position:absolute;
	inset:0;
	background:#101114;
	opacity:0;
	transition:opacity .35s
}

.project-card:hover .project-image:after {
	opacity:.1
}

.project-image img {
	width:100%;
	height:100%;
	object-fit:cover;
	transition:transform .8s cubic-bezier(.2,.7,.2,1)
}

.project-card:hover img {
	transform:scale(1.04)
}

.project-index {
	position:absolute;
	left:23px;
	top:20px;
	font:11px Arial,sans-serif;
	letter-spacing:.08em;
	color:#fff;
	z-index:1;
	text-shadow:0 1px 4px #000
}

.image-arrow {
	position:absolute;
	right:20px;
	bottom:20px;
	width:42px;
	height:42px;
	background:var(--paper);
	display:grid;
	place-items:center;
	font-size:26px;
	z-index:2;
	transition:background .2s,color .2s
}

.project-card:hover .image-arrow {
	background:var(--blue);
	color:#fff
}

.project-image.genesis img {
	object-position:center 48%
}

.project-image.kia {
	background:#c6b3aa;
	height:320px
}

.project-image.kia img {
	height:auto;
	width:87%;
	box-shadow:0 20px 35px #20120a30
}

.project-image.monster {
	background:#c9e623;
	height:370px
}

.project-image.monster img {
	height:87%;
	width:auto;
	box-shadow:0 18px 30px #1f2c1230
}

.project-image.monster .project-index {
	color:#101114;
	text-shadow:none
}

.project-image.ioniq {
	background:#b4bec9;
	height:425px
}

.project-image.ioniq img {
	object-fit:contain;
	width:83%;
	height:83%
}

.project-caption {
	margin-top:20px;
	position:relative
}

.project-caption h3 {
	font:700 24px Arial,sans-serif;
	letter-spacing:-.03em;
	margin-bottom:9px
}

.project-caption p {
	font-size:16px;
	line-height:1.6
}

.project-caption>span {
	display:block;
	font-size:12px;
	color:var(--muted);
	margin-top:10px
}

.expertise {
	background:#101114;
	color:#f4f4f4
}

.expertise-layout {
	display:grid;
	grid-template-columns:.9fr 1.35fr;
	gap:85px;
	align-items:start
}

.expertise-intro {
	position:sticky;
	top:60px
}

.expertise h2 {
	font-size:48px;
	line-height:1.22;
	font-weight:550;
	margin-bottom:28px
}

.expertise-intro>p:not(.eyebrow) {
	font-size:16px;
	color:#aaaab1;
	line-height:1.8
}

.expertise .text-link {
	margin-top:35px
}

.tech-note {
	font:11px Arial,sans-serif;
	letter-spacing:.1em;
	color:#777b87;
	margin-top:95px
}

.service {
	border-top:1px solid #45464b
}

.service:last-child {
	border-bottom:1px solid #45464b
}

.service summary {
	list-style:none;
	display:flex;
	gap:24px;
	align-items:center;
	cursor:pointer;
	padding:32px 0
}

.service summary::-webkit-details-marker {
	display:none
}

.service-no {
	font:12px Arial,sans-serif;
	color:#9c9eaa;
	align-self:flex-start;
	margin-top:7px
}

.service h3 {
	font-size:25px;
	font-weight:550;
	line-height:1.35
}

.service summary div>span {
	font:10px Arial,sans-serif;
	letter-spacing:.08em;
	color:#8e909a;
	display:block;
	margin-top:12px
}

.service summary b {
	font-size:30px;
	font-weight:300;
	margin-left:auto;
	transition:transform .3s
}

.service[open] summary b {
	transform:rotate(45deg);
	color:#8197ff
}

.service-detail {
	padding:0 0 30px 38px;
	color:#aaaab1;
	font-size:15px
}

.service-tags {
	display:flex;
	flex-wrap:wrap;
	gap:8px 17px;
	margin-top:20px;
	color:#e1e3ee;
	font-size:12px
}

.service-tags span:before {
	content:'/';
	color:#6686ff;
	margin-right:9px
}

.about-title {
	font-size:clamp(38px,4.5vw,64px);
	font-weight:650;
	line-height:1.28;
	margin-bottom:64px
}

.about-title span {
	color:#818289
}

.about-grid {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:100px
}

.about-lead>p:first-child {
	font-size:25px;
	line-height:1.6;
	font-weight:550;
	margin-bottom:24px
}

.body-copy {
	color:var(--muted);
	font-size:16px;
	line-height:1.85
}

.brand-signature {
	width:210px;
	margin-top:60px;
	opacity:.85
}

.reasons article {
	display:flex;
	gap:23px;
	padding:25px 0;
	border-top:1px solid var(--line)
}

.reasons article:last-child {
	border-bottom:1px solid var(--line)
}

.reasons article>span {
	color:var(--blue);
	font:12px Arial;
	margin-top:7px
}

.reasons h3 {
	font-size:21px;
	font-weight:650;
	line-height:1.4;
	margin-bottom:10px
}

.reasons p {
	color:var(--muted);
	font-size:15px
}

.partners-section {
	padding-top:65px;
	padding-bottom:65px;
	border-top:1px solid var(--line);
	border-bottom:1px solid var(--line)
}

.partners-heading {
	display:flex;
	justify-content:space-between;
	gap:30px;
	align-items:center
}

.partners-heading p {
	font-size:14px;
	color:var(--muted)
}

.partners-heading .eyebrow {
	margin:0
}

.logo-grid {
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:0;
	margin:35px 0 10px
}

.partner-logo {
	height:110px;
	display:flex;
	justify-content:center;
	align-items:center;
	padding:25px 40px
}

.partner-logo img {
	max-width:160px;
	max-height:48px;
	width:100%;
	object-fit:contain;
	filter:grayscale(1);
	opacity:.72;
	transition:filter .25s,opacity .25s
}

.partner-logo:hover img {
	filter:grayscale(0);
	opacity:1
}

.partner-logo.light-logo img {
	filter:brightness(0);
	opacity:.7
}

.partner-note {
	font-size:12px;
	color:#7a7c82
}

.process-list {
	display:grid;
	grid-template-columns:repeat(4,1fr);
	list-style:none;
	padding:0;
	margin:0;
	border-top:1px solid var(--ink)
}

.process-list li {
	padding:30px 25px 0 0
}

.process-list li:not(:first-child) {
	padding-left:25px;
	border-left:1px solid var(--line)
}

.process-list span {
	font:12px Arial;
	color:var(--blue);
	letter-spacing:.03em
}

.process-list h3 {
	font-size:22px;
	font-weight:600;
	margin:38px 0 14px
}

.process-list p {
	color:var(--muted);
	font-size:15px
}

.contact-section {
	background:var(--blue);
	color:white
}

.contact-section .section {
	padding-top:80px;
	padding-bottom:70px
}

.contact-title {
	font-size:clamp(40px,5.6vw,80px);
	line-height:1.2;
	letter-spacing:-.055em;
	display:block;
	position:relative
}

.contact-title>span {
	position:absolute;
	right:0;
	top:0;
	font-family:Arial;
	font-size:110px;
	line-height:1.1;
	transition:transform .3s
}

.contact-title:hover>span {
	transform:translate(7px,-7px)
}

.contact-bottom {
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:25px;
	border-top:1px solid #ffffff55;
	margin-top:52px;
	padding-top:28px
}

.contact-bottom p {
	font-size:15px;
	color:#d6dfff
}

.contact-bottom a {
	font-size:18px
}

.site-footer {
	padding:55px 64px 35px;
	max-width:1600px;
	margin:auto
}

.footer-top {
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:40px;
	padding-bottom:38px;
	border-bottom:1px solid var(--line)
}

.footer-top p {
	font-size:17px;
	line-height:1.5;
	flex:1;
	margin-left:7vw
}

.footer-top>a:last-child {
	font-size:13px
}

.footer-bottom {
	padding-top:28px;
	display:grid;
	grid-template-columns:1.5fr 1fr .8fr;
	font-size:12px;
	color:var(--muted);
	gap:20px;
	line-height:1.9
}

.footer-bottom>div {
	text-align:right
}

.footer-bottom>div p {
	margin-top:15px;
	font:11px Arial
}

.back-top {
	position:fixed;
	bottom:25px;
	right:25px;
	border:1px solid #aaa;
	background:var(--paper);
	color:var(--ink);
	font-size:21px;
	width:43px;
	height:43px;
	z-index:90;
	opacity:0;
	pointer-events:none;
	transform:translateY(10px);
	transition:.3s
}

.back-top.visible {
	opacity:1;
	pointer-events:auto;
	transform:none
}

.js-motion .reveal {
	opacity:0;
	transform:translateY(24px);
	transition:opacity .8s,transform .8s
}

.js-motion .reveal.is-visible {
	opacity:1;
	transform:none
}

.page-hero {
	padding-top:85px;
	padding-bottom:55px
}

.page-hero h1 {
	font-size:clamp(50px,7.5vw,100px);
	letter-spacing:-.06em;
	font-family:Arial,sans-serif;
	font-weight:700;
	line-height:.98;
	margin-bottom:28px
}

.page-hero h1 span {
	color:var(--blue)
}

.page-hero>p:last-child {
	font-size:19px;
	color:var(--muted)
}

.work-filters {
	display:flex;
	gap:12px;
	flex-wrap:wrap;
	padding:0 0 30px;
	border-bottom:1px solid var(--line);
	margin-bottom:50px
}

.work-filters button {
	border:0;
	border-bottom:2px solid transparent;
	background:none;
	color:var(--muted);
	padding:9px 17px;
	font-size:14px
}

.work-filters button.active {
	border-color:var(--blue);
	color:var(--blue)
}

.archive-grid {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:55px 32px
}

.archive-project {
	scroll-margin-top:45px;
	min-width:0
}

.archive-project[hidden] {
	display:none
}

.archive-image {
	height:365px;
	overflow:hidden;
	position:relative;
	background:#e0e3e8;
	display:flex;
	align-items:center;
	justify-content:center
}

.archive-image img {
	width:100%;
	height:100%;
	object-fit:cover;
	transition:transform .5s
}

.archive-project:hover .archive-image img {
	transform:scale(1.025)
}

.archive-image.portrait img {
	width:auto;
	height:90%;
	object-fit:contain
}

.archive-image.kiosk img {
	width:90%;
	height:auto;
	max-height:85%;
	object-fit:contain
}

.archive-image.green {
	background:#c9e623
}

.archive-image.blue {
	background:#b4bec9
}

.archive-image.rose {
	background:#c6b3aa
}

.archive-image.mint {
	background:#baeae5
}

.archive-image>span {
	position:absolute;
	left:18px;
	top:16px;
	background:var(--paper);
	padding:4px 10px;
	font-size:11px;
	z-index:1
}

.archive-project h2 {
	font-size:25px;
	margin:23px 0 14px;
	font-weight:650
}

.archive-project p {
	font-size:15px;
	color:var(--muted);
	line-height:1.8
}

.archive-project ul {
	padding:0;
	display:flex;
	list-style:none;
	gap:9px 14px;
	flex-wrap:wrap;
	margin:16px 0;
	font-size:12px;
	color:var(--blue)
}

.archive-project .text-link {
	margin-top:0;
	font-size:13px
}

.archive-bottom {
	display:flex;
	justify-content:space-between;
	gap:25px;
	align-items:center;
	margin-top:80px;
	padding-top:35px;
	border-top:1px solid var(--line)
}

.archive-bottom p {
	font-size:14px;
	color:var(--muted)
}

.legal-content {
	max-width:900px;
	padding-top:0
}

.legal-content h2 {
	font-size:24px;
	margin:45px 0 18px
}

.legal-content p,.legal-content li {
	font-size:16px;
	color:#50535b
}

.legal-content table {
	width:100%;
	border-collapse:collapse
}

.legal-content td,.legal-content th {
	border:1px solid var(--line);
	padding:14px;
	text-align:left;
	font-size:15px
}

.legal-content th {
	background:#eeeef0
}

@media(min-width:1600px) {
	.hero-art {
		right:0
	}
	.site-header {
		padding-left:max(64px,calc((100vw - 1472px)/2));
		padding-right:max(64px,calc((100vw - 1472px)/2))
	}
}

@media(max-width:1100px) {
	.section {
		padding:85px 36px
	}
	.site-header {
		padding:0 36px
	}
	.site-header nav {
		gap:20px
	}
	.hero {
		padding-left:36px;
		padding-right:36px
	}
	.hero-content {
		min-height:610px
	}
	.hero h1 {
		font-size:8.5vw
	}
	.hero-art {
		right:-55px;
		width:60%;
		top:80px;
		height:470px;
		opacity:.85
	}
	.hero-copy {
		padding-top:55px
	}
	.expertise-layout {
		gap:50px;
		grid-template-columns:.85fr 1.2fr
	}
	.service h3 {
		font-size:21px
	}
	.about-grid {
		gap:55px
	}
	.project-image {
		height:360px
	}
	.project-image.kia {
		height:290px
	}
	.project-image.ioniq {
		height:350px
	}
	.site-footer {
		padding:45px 36px 30px
	}
	.partner-logo {
		padding:25px
	}
	.section-heading h2,.expertise h2 {
		font-size:42px
	}
	.contact-bottom a {
		font-size:16px
	}
	.archive-image {
		height:290px
	}
}

@media(max-width:760px) {
	html {
		scroll-padding-top:80px
	}
	.site-header {
		height:78px;
		padding:0 22px
	}
	.wordmark {
		font-size:25px
	}
	.menu-toggle {
		display:flex;
		flex-direction:column;
		gap:7px;
		align-items:center;
		justify-content:center;
		width:42px;
		height:42px;
		border:0;
		background:none;
		z-index:2
	}
	.menu-toggle span {
		width:24px;
		height:1px;
		background:var(--ink);
		transition:.25s
	}
	.menu-toggle[aria-expanded=true] span:first-child {
		transform:translateY(4px) rotate(45deg)
	}
	.menu-toggle[aria-expanded=true] span:last-child {
		transform:translateY(-4px) rotate(-45deg)
	}
	.site-header nav {
		display:none;
		position:absolute;
		top:78px;
		left:0;
		width:100%;
		background:var(--paper);
		padding:25px 24px 32px;
		border-bottom:1px solid var(--line);
		box-shadow:0 20px 30px #0000000d;
		align-items:stretch;
		gap:0
	}
	.site-header nav.is-open {
		display:flex;
		flex-direction:column
	}
	.site-header nav>a {
		padding:15px 0;
		font-size:18px
	}
	.site-header nav .nav-cta {
		padding:14px 18px;
		margin-top:15px
	}
	.hero {
		padding:21px 22px 0
	}
	.hero-kicker {
		font-size:9px;
		line-height:1.5
	}
	.hero-kicker>span:last-child {
		display:none
	}
	.hero-content {
		min-height:720px;
		align-items:flex-start
	}
	.hero-copy {
		padding-top:45px;
		padding-bottom:0;
		width:100%
	}
	.hero h1 {
		font-size:12.15vw;
		line-height:.98;
		margin-bottom:29px;
		letter-spacing:-.07em
	}
	.hero h2 {
		font-size:29px;
		line-height:1.4
	}
	.hero p {
		font-size:15px
	}
	.hero .button {
		margin-top:24px;
		position:relative;
		z-index:3;
		font-size:14px;
		padding:12px 18px;
		min-height:50px
	}
	.hero-art {
		top:auto;
		bottom:4px;
		right:-66px;
		width:100%;
		height:310px;
		opacity:.95
	}
	.art-label {
		right:43px;
		bottom:12px;
		font-size:8px
	}
	.cross-one {
		right:23%
	}
	.hero-bottom {
		padding:19px 0;
		gap:12px
	}
	.hero-bottom p {
		font-size:8px;
		max-width:170px;
		line-height:1.6
	}
	.hero-bottom a {
		font-size:8px
	}
	.hero-bottom span {
		margin-left:9px
	}
	.ticker {
		padding:12px 0
	}
	.ticker>div {
		font-size:11px
	}
	.ticker b {
		font-size:18px;
		margin:0 25px
	}
	.section {
		padding:70px 22px
	}
	.eyebrow {
		font-size:11px;
		margin-bottom:21px
	}
	.section-heading {
		display:block;
		margin-bottom:32px
	}
	.section-heading h2,.expertise h2 {
		font-size:36px
	}
	.section-heading>div:last-child>p,.section-heading>p {
		font-size:15px;
		margin-top:23px
	}
	.section-heading .text-link {
		margin-top:12px
	}
	.work-grid {
		display:block
	}
	.project-card {
		margin-bottom:43px
	}
	.project-card:nth-child(even) {
		padding-top:0
	}
	.project-card:last-child {
		margin-bottom:0
	}
	.project-image,.project-image.ioniq {
		height:340px
	}
	.project-image.kia {
		height:255px
	}
	.project-image.monster {
		height:315px
	}
	.project-index {
		left:16px;
		top:15px;
		font-size:10px
	}
	.project-caption h3 {
		font-size:23px
	}
	.project-caption p {
		font-size:15px
	}
	.project-caption>span {
		font-size:11px
	}
	.expertise-layout {
		display:block
	}
	.expertise-intro {
		position:static;
		margin-bottom:42px
	}
	.expertise h2 {
		margin-bottom:20px
	}
	.expertise-intro>p:not(.eyebrow) {
		font-size:15px
	}
	.expertise .text-link {
		margin-top:18px
	}
	.tech-note {
		display:none
	}
	.service summary {
		gap:18px;
		padding:27px 0
	}
	.service h3 {
		font-size:21px
	}
	.service summary div>span {
		font-size:9px
	}
	.service-detail {
		font-size:15px;
		padding-left:30px
	}
	.service-tags {
		font-size:12px;
		gap:7px 12px
	}
	.about-title {
		font-size:33px;
		line-height:1.4;
		margin-bottom:37px
	}
	.about-grid {
		display:block
	}
	.about-lead>p:first-child {
		font-size:23px
	}
	.body-copy {
		font-size:15px
	}
	.brand-signature {
		width:175px;
		margin:30px 0 40px
	}
	.reasons h3 {
		font-size:20px
	}
	.reasons p {
		font-size:15px
	}
	.partners-heading {
		display:block
	}
	.partners-heading>p:last-child {
		margin-top:15px;
		font-size:14px
	}
	.logo-grid {
		grid-template-columns:repeat(2,1fr);
		margin-top:20px
	}
	.partner-logo {
		height:92px;
		padding:23px 28px
	}
	.partner-logo img {
		max-height:42px;
		max-width:125px
	}
	.partner-note {
		font-size:11px;
		line-height:1.7
	}
	.process-list {
		grid-template-columns:1fr 1fr
	}
	.process-list li {
		padding:25px 17px 25px 0;
		border-bottom:1px solid var(--line)
	}
	.process-list li:not(:first-child) {
		padding-left:17px
	}
	.process-list li:nth-child(3) {
		border-left:0;
		padding-left:0
	}
	.process-list h3 {
		font-size:20px;
		margin-top:28px
	}
	.process-list p {
		font-size:14px
	}
	.process-list span {
		font-size:11px
	}
	.contact-section .section {
		padding:62px 22px 46px
	}
	.contact-title {
		font-size:37px;
		line-height:1.4;
		letter-spacing:-.05em;
		padding-right:34px
	}
	.contact-title>span {
		font-size:47px;
		top:9px
	}
	.contact-bottom {
		margin-top:33px;
		padding-top:24px;
		display:flex;
		flex-direction:column;
		align-items:flex-start;
		gap:16px
	}
	.contact-bottom p {
		font-size:14px
	}
	.contact-bottom a {
		font-size:18px
	}
	.site-footer {
		padding:40px 22px 25px
	}
	.footer-top {
		flex-wrap:wrap;
		gap:24px
	}
	.footer-top p {
		margin-left:0;
		flex:auto;
		font-size:14px;
		text-align:right
	}
	.footer-top>a:last-child {
		width:100%;
		font-size:12px
	}
	.footer-bottom {
		grid-template-columns:1fr;
		gap:19px;
		font-size:11px
	}
	.footer-bottom>div {
		text-align:left
	}
	.footer-bottom>div p {
		margin-top:22px
	}
	.back-top {
		right:14px;
		bottom:15px;
		width:38px;
		height:38px
	}
	.page-hero {
		padding-top:58px;
		padding-bottom:35px
	}
	.page-hero h1 {
		font-size:55px
	}
	.page-hero>p:last-child {
		font-size:16px
	}
	.archive-section {
		padding-top:0
	}
	.work-filters {
		gap:2px;
		padding-bottom:20px;
		margin-bottom:30px
	}
	.work-filters button {
		font-size:13px;
		padding:9px 12px
	}
	.archive-grid {
		grid-template-columns:1fr;
		gap:46px
	}
	.archive-image {
		height:310px
	}
	.archive-project h2 {
		font-size:24px
	}
	.archive-bottom {
		display:block;
		margin-top:55px
	}
	.archive-bottom .button {
		margin-top:23px
	}
	.legal-content {
		padding-top:0
	}
	.legal-content td,.legal-content th {
		font-size:13px;
		padding:10px
	}
	.legal-content h2 {
		font-size:22px
	}
}

@media(prefers-reduced-motion:reduce) {
	html {
		scroll-behavior:auto
	}
	*,*::before,*::after {
		animation-duration:.01ms!important;
		animation-iteration-count:1!important;
		transition-duration:.01ms!important
	}
	.js-motion .reveal {
		opacity:1;
		transform:none
	}
}

.sr-only {
	position:absolute;
	width:1px;
	height:1px;
	padding:0;
	margin:-1px;
	overflow:hidden;
	clip:rect(0,0,0,0);
	white-space:nowrap;
	border:0
}

.project-gallery {
	margin-top:24px;
	border-top:1px solid var(--line)
}

.project-gallery summary {
	padding:15px 0;
	cursor:pointer;
	font-size:14px;
	list-style:none;
	display:flex;
	justify-content:space-between
}

.project-gallery summary::-webkit-details-marker {
	display:none
}

.project-gallery>div {
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:10px
}

.project-gallery img {
	width:100%;
	height:auto
}

/* 좁은 모바일에서 긴 영문 제목과 장식 레이블이 잘리지 않도록 조정 */
@media (max-width: 760px) {
	.work-page .page-hero h1 {
		font-size: clamp(42px, 12.6vw, 55px);
	}
	.art-label {
		right: 82px;
	}
}