@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600");



@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}







html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;}



	
html, body {
    max-width: 100%;
    overflow-x: hidden !important;
    position: relative;
	
    -ms-overflow-style: none; /* IE, Edge */
    scrollbar-width: none;    /* Firefox */
}


html::-webkit-scrollbar, 
body::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}



body {
	overflow-x: hidden;
	width: 100%;
    margin: 0;
    padding: 0;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

	blockquote:before, blockquote:after, q:before, q:after {
		content: '';
		content: none;
	}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

body {
	-webkit-text-size-adjust: none;
}

mark {
	background-color: transparent;
	color: inherit;
}

input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input, select, textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
}

/* Basic */

	html {
		box-sizing: border-box;
	}

	*, *:before, *:after {
		box-sizing: inherit;
	}

	body {
		background: #000;
		color: #fff;
		font-size: 15pt;
		line-height: 1.8;
		font-family: 'Source Sans Pro', 'GMarketSans', sans-serif;
		font-weight: 300;
	}

		body.is-preload *, body.is-preload *:before, body.is-preload *:after {
			-moz-animation: none !important;
			-webkit-animation: none !important;
			-ms-animation: none !important;
			animation: none !important;
			-moz-transition: none !important;
			-webkit-transition: none !important;
			-ms-transition: none !important;
			transition: none !important;
		}

	input, textarea, select {
		font-size: 15pt;
		line-height: 185%;
		font-family: 'Source Sans Pro', 'GMarketSans', sans-serif;
		font-weight: 300;
	}

	h1, h2, h3, h4, h5, h6 {
		font-family: 'Montserrat', 'GMarketSans', sans-serif;
		font-weight: 400;
		line-height: 125%;
	}

	h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
		color: inherit;
		text-decoration: none;
		border-bottom-color: transparent;
	}

	h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong {
		font-weight: 600;
	}

	h2 {
		font-size: 2.85em;
	}

	h3 {
		font-size: 1.25em;
	}

	h4 {
		font-size: 1em;
		margin: 0 0 0.25em 0;
	}

	strong, b {
		font-weight: 400;
	}

	em, i {
		font-style: italic;
	}

	a {
		color: inherit;
		text-decoration: none;
		-moz-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
		-webkit-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
		-ms-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
		transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
	}

		a:hover {
			color: var(--point-color);
			border-bottom-color: transparent;
		}

	sub {
		position: relative;
		top: 0.5em;
		font-size: 0.8em;
	}

	sup {
		position: relative;
		top: -0.5em;
		font-size: 0.8em;
	}

	blockquote {
		border-left: solid 0.5em #ddd;
		padding: 0.5em 0 0.5em 1em;
		font-style: italic;
	}

	p, ul, ol, dl, table {
		margin-bottom: 1em;
	}



	br.clear {
		clear: both;
	}

	hr {
		position: relative;
		display: block;
		border: 0;
		top: 7em;
		margin-bottom: 14em;
		height: 6px;
		border-top: solid 1px rgba(128, 128, 128, 0.2);
		border-bottom: solid 1px rgba(128, 128, 128, 0.2);
	}

		hr:before, hr:after {
			content: '';
			position: absolute;
			top: -8px;
			display: block;
			width: 1px;
			height: 21px;
			background: rgba(128, 128, 128, 0.2);
		}

		hr:before {
			left: -1px;
		}

		hr:after {
			right: -1px;
		}

	.timestamp {
		color: rgba(128, 128, 128, 0.75);
		font-size: 0.8em;
	}

/* Container */

	.container {
		margin: 0 auto;
		max-width: 100%;
		width: 1400px;
		z-index: 1;
	}


/* 컨테이너 설정 */
.container-flex {
  display: flex;
  height: 25vh; /* 또는 600px 등 원하는 높이 */
  max-height: 500px;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

.container-flex h1 {
	font-size: 2.5em;
	color:#fff;
    display: block;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    unicode-bidi: isolate;
}



		@media screen and (max-width: 1680px) {

			.container {
				width: 1200px;
			}

		}

		@media screen and (max-width: 1280px) {

			.container {
				width: 100%;
			}

		}

		@media screen and (max-width: 960px) {

			.container {
				width: 100%;
			}

		}

		@media screen and (max-width: 750px) {

			.container {
				width: 100%;
			}

		}

		@media screen and (max-width: 600px) {

			.container {
				width: 100%;
			}

		}


#topButton {
    position: fixed !important;
    bottom: 30px;
    right: 30px;
    z-index: 9998 !important;

    /* [수정] 처음에는 안 보이게 설정 */
    opacity: 0;
    visibility: hidden;
    
    /* [추가] 서서히 나타나는 애니메이션 (0.5초) */
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

/* [추가] 스크롤 시 나타날 상태 */
#topButton.visible {
    opacity: 1 !important;
    visibility: visible !important;
}

/* 아래 서식은 주신 그대로 유지합니다 */
#topButton a {
    display: flex;
    width: 60px;
    height: 60px;
    background-color: #fff;
    color: #000 !important;
    border-radius: 50%;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    transition: transform 0.3s ease;
}

#topButton a:hover {
    transform: scale(1.1);
}




/* 1. 로딩 마스크 다시 고정 */
#loading-mask {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: #ffffff !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 999999 !important;
}

/* 2. 로더: calc를 제거한 최적화 좌표 적용 */
.loader {
    width: 45px;
    aspect-ratio: 1;
    --c: no-repeat repeating-linear-gradient(90deg, #000 0 20%, #0000 0 40%);
    background: var(--c), var(--c), var(--c), var(--c);
    background-size: 100% 26%;
    /* linear를 명시해야 끊기지 않고 움직입니다 */
    animation: l22 1.5s infinite linear;
}

@keyframes l22 {
  0%    { background-position: 0 -20px, 0 -20px, 0 -20px, 0 -20px; }
  12.5% { background-position: 0 -20px, 0 -20px, 0 -20px, 0 100%; }
  25%   { background-position: 0 -20px, 0 -20px, 0 66.6%, 0 100%; }
  37.5% { background-position: 0 -20px, 0 33.3%, 0 66.6%, 0 100%; }
  45%, 50% { background-position: 0 0%, 0 33.3%, 0 66.6%, 0 100%; }
  62.5% { background-position: 0 0%, 0 33.3%, 0 66.6%, 0 50px; }
  75%   { background-position: 0 0%, 0 33.3%, 0 50px,   0 50px; }
  87.5% { background-position: 0 0%, 0 50px,   0 50px,   0 50px; }
  100%  { background-position: 0 50px, 0 50px,   0 50px,   0 50px; }
}

/* 초기 상태: 로딩 중일 때 숨기고 싶은 요소들 */
body:not(.loaded) .title-block,
body:not(.loaded) #page-wrapper{
    visibility: hidden;
    opacity: 0;
}

/* 로딩 완료 후: 부드럽게 나타나기 */
body.loaded .title-block,
body.loaded #page-wrapper{
    visibility: visible;
    opacity: 1;
    transition: opacity 0.8s ease-in;
}




.special-padding {
    padding: 0 5em; /* 좌우에 30px 패딩 */
}







/* Row */

	.row {
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;
		align-items: stretch;

		/* 핵심: 최대 너비 제한 */
		max-width: 1920px;
		
		/* 중요: 너비가 1920px 미만일 때도 중앙에 오도록 설정 */
		margin-left: auto !important;
		margin-right: auto !important;

		
	}

	/* 최대 너비가 필요 없는 경우 추가할 클래스 */
.row.full-width {
    max-width: none !important; /* 1920px 제한 해제 */
}

		.row > * {
			box-sizing: border-box;
		}

		.row.gtr-uniform > * > :last-child {
			margin-bottom: 0;
		}

		.row.aln-left {
			justify-content: flex-start;
		}

		.row.aln-center {
			justify-content: center;
		}

		.row.aln-right {
			justify-content: flex-end;
		}

		.row.aln-top {
			align-items: flex-start;
		}

		.row.aln-middle {
			align-items: center;
		}

		.row.aln-bottom {
			align-items: flex-end;
		}

		.row > .imp {
			order: -1;
		}

		.row > .col-1 {
			width: 8.33333%;
		}

		.row > .off-1 {
			margin-left: 8.33333%;
		}

		.row > .col-2 {
			width: 16.66667%;
		}

		.row > .off-2 {
			margin-left: 16.66667%;
		}

		.row > .col-3 {
			width: 25%;
		}

		.row > .off-3 {
			margin-left: 25%;
		}

		.row > .col-4 {
			width: 33.33333%;
		}

		.row > .off-4 {
			margin-left: 33.33333%;
		}

		.row > .col-5 {
			width: 41.66667%;
		}

		.row > .off-5 {
			margin-left: 41.66667%;
		}

		.row > .col-6 {
			width: 50%;
		}

		.row > .off-6 {
			margin-left: 50%;
		}

		.row > .col-7 {
			width: 58.33333%;
		}

		.row > .off-7 {
			margin-left: 58.33333%;
		}

		.row > .col-8 {
			width: 66.66667%;
		}

		.row > .off-8 {
			margin-left: 66.66667%;
		}

		.row > .col-9 {
			width: 75%;
		}

		.row > .off-9 {
			margin-left: 75%;
		}

		.row > .col-10 {
			width: 83.33333%;
		}

		.row > .off-10 {
			margin-left: 83.33333%;
		}

		.row > .col-11 {
			width: 91.66667%;
		}

		.row > .off-11 {
			margin-left: 91.66667%;
		}

		.row > .col-12 {
			width: 100%;
		}

		.row > .off-12 {
			margin-left: 100%;
		}

		.row.gtr-0 {
			margin-top: 0px;
			margin-left: 0px;
		}

			.row.gtr-0 > * {
				padding: 0px 0 0 0px;
			}

			.row.gtr-0.gtr-uniform {
				margin-top: 0px;
			}

				.row.gtr-0.gtr-uniform > * {
					padding-top: 0px;
				}

		.row.gtr-25 {
			margin-top: -10px;
			margin-left: -10px;
		}

			.row.gtr-25 > * {
				padding: 10px 5px 0 5px;
			}

			.row.gtr-25.gtr-uniform {
				margin-top: -10px;
			}

				.row.gtr-25.gtr-uniform > * {
					padding-top: 10px;
				}

		.row.gtr-50 {
			margin-top: -20px;
			margin-left: -20px;
		}

			.row.gtr-50 > * {
				padding: 20px 0 0 20px;
			}

			.row.gtr-50.gtr-uniform {
				margin-top: -20px;
			}

				.row.gtr-50.gtr-uniform > * {
					padding-top: 20px;
				}

		.row {
			margin-top: -40px;
			margin-left: -40px;
		}

			.row > * {
				padding: 40px 20px 0 20px;
			}

			.row.gtr-uniform {
				margin-top: -40px;
			}

				.row.gtr-uniform > * {
					padding-top: 40px;
				}

		.row.gtr-150 {
			margin-top: -60px;
			margin-left: -60px;
		}

			.row.gtr-150 > * {
				padding: 60px 0 0 60px;
			}

			.row.gtr-150.gtr-uniform {
				margin-top: -60px;
			}

				.row.gtr-150.gtr-uniform > * {
					padding-top: 60px;
				}

		.row.gtr-200 {
			margin-top: -80px;
			margin-left: -80px;
		}

			.row.gtr-200 > * {
				padding: 80px 0 0 80px;
			}

			.row.gtr-200.gtr-uniform {
				margin-top: -80px;
			}

				.row.gtr-200.gtr-uniform > * {
					padding-top: 80px;
				}

		@media screen and (max-width: 1680px) {

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-wide {
					order: -1;
				}

				.row > .col-1-wide {
					width: 8.33333%;
				}

				.row > .off-1-wide {
					margin-left: 8.33333%;
				}

				.row > .col-2-wide {
					width: 16.66667%;
				}

				.row > .off-2-wide {
					margin-left: 16.66667%;
				}

				.row > .col-3-wide {
					width: 25%;
				}

				.row > .off-3-wide {
					margin-left: 25%;
				}

				.row > .col-4-wide {
					width: 33.33333%;
				}

				.row > .off-4-wide {
					margin-left: 33.33333%;
				}

				.row > .col-5-wide {
					width: 41.66667%;
				}

				.row > .off-5-wide {
					margin-left: 41.66667%;
				}

				.row > .col-6-wide {
					width: 50%;
				}

				.row > .off-6-wide {
					margin-left: 50%;
				}

				.row > .col-7-wide {
					width: 58.33333%;
				}

				.row > .off-7-wide {
					margin-left: 58.33333%;
				}

				.row > .col-8-wide {
					width: 66.66667%;
				}

				.row > .off-8-wide {
					margin-left: 66.66667%;
				}

				.row > .col-9-wide {
					width: 75%;
				}

				.row > .off-9-wide {
					margin-left: 75%;
				}

				.row > .col-10-wide {
					width: 83.33333%;
				}

				.row > .off-10-wide {
					margin-left: 83.33333%;
				}

				.row > .col-11-wide {
					width: 91.66667%;
				}

				.row > .off-11-wide {
					margin-left: 91.66667%;
				}

				.row > .col-12-wide {
					width: 100%;
				}

				.row > .off-12-wide {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0px;
					margin-left: 0px;
				}

					.row.gtr-0 > * {
						padding: 0px 0 0 0px;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0px;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0px;
						}

				.row.gtr-25 {
					margin-top: -10px;
					margin-left: -10px;
				}

					.row.gtr-25 > * {
						padding: 10px 5px 0 5px;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -10px;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 10px;
						}

				.row.gtr-50 {
					margin-top: -20px;
					margin-left: -20px;
				}

					.row.gtr-50 > * {
						padding: 20px 0 0 20px;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -20px;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 20px;
						}

				.row {
					margin-top: -40px;
					margin-left: -40px;
				}

					.row > * {
						padding: 40px 20px 0 20px;
					}

					.row.gtr-uniform {
						margin-top: -40px;
					}

						.row.gtr-uniform > * {
							padding-top: 40px;
						}

				.row.gtr-150 {
					margin-top: -60px;
					margin-left: -60px;
				}

					.row.gtr-150 > * {
						padding: 60px 0 0 60px;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -60px;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 60px;
						}

				.row.gtr-200 {
					margin-top: -80px;
					margin-left: -80px;
				}

					.row.gtr-200 > * {
						padding: 80px 0 0 80px;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -80px;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 80px;
						}

		}

		@media screen and (max-width: 1280px) {

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-normal {
					order: -1;
				}

				.row > .col-1-normal {
					width: 8.33333%;
				}

				.row > .off-1-normal {
					margin-left: 8.33333%;
				}

				.row > .col-2-normal {
					width: 16.66667%;
				}

				.row > .off-2-normal {
					margin-left: 16.66667%;
				}

				.row > .col-3-normal {
					width: 25%;
				}

				.row > .off-3-normal {
					margin-left: 25%;
				}

				.row > .col-4-normal {
					width: 33.33333%;
				}

				.row > .off-4-normal {
					margin-left: 33.33333%;
				}

				.row > .col-5-normal {
					width: 41.66667%;
				}

				.row > .off-5-normal {
					margin-left: 41.66667%;
				}

				.row > .col-6-normal {
					width: 50%;
				}

				.row > .off-6-normal {
					margin-left: 50%;
				}

				.row > .col-7-normal {
					width: 58.33333%;
				}

				.row > .off-7-normal {
					margin-left: 58.33333%;
				}

				.row > .col-8-normal {
					width: 66.66667%;
				}

				.row > .off-8-normal {
					margin-left: 66.66667%;
				}

				.row > .col-9-normal {
					width: 75%;
				}

				.row > .off-9-normal {
					margin-left: 75%;
				}

				.row > .col-10-normal {
					width: 83.33333%;
				}

				.row > .off-10-normal {
					margin-left: 83.33333%;
				}

				.row > .col-11-normal {
					width: 91.66667%;
				}

				.row > .off-11-normal {
					margin-left: 91.66667%;
				}

				.row > .col-12-normal {
					width: 100%;
				}

				.row > .off-12-normal {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0px;
					margin-left: 0px;
				}

					.row.gtr-0 > * {
						padding: 0px 0 0 0px;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0px;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0px;
						}

				.row.gtr-25 {
					margin-top: -9px;
					margin-left: -9px;
				}

					.row.gtr-25 > * {
						padding: 4px;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -9px;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 9px;
						}

				.row.gtr-50 {
					margin-top: -18px;
					margin-left: -18px;
				}

					.row.gtr-50 > * {
						padding: 18px 0 0 18px;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -18px;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 18px;
						}

				.row {
					margin-top: -36px;
					margin-left: -36px;
				}

					.row > * {
						padding: 36px 18px 0 18px;
					}

					.row.gtr-uniform {
						margin-top: -36px;
					}

						.row.gtr-uniform > * {
							padding-top: 36px;
						}

				.row.gtr-150 {
					margin-top: -54px;
					margin-left: -54px;
				}

					.row.gtr-150 > * {
						padding: 54px 0 0 54px;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -54px;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 54px;
						}

				.row.gtr-200 {
					margin-top: -72px;
					margin-left: -72px;
				}

					.row.gtr-200 > * {
						padding: 72px 0 0 72px;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -72px;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 72px;
						}

		}

		@media screen and (max-width: 960px) {

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-narrow {
					order: -1;
				}

				.row > .col-1-narrow {
					width: 8.33333%;
				}

				.row > .off-1-narrow {
					margin-left: 8.33333%;
				}

				.row > .col-2-narrow {
					width: 16.66667%;
				}

				.row > .off-2-narrow {
					margin-left: 16.66667%;
				}

				.row > .col-3-narrow {
					width: 25%;
				}

				.row > .off-3-narrow {
					margin-left: 25%;
				}

				.row > .col-4-narrow {
					width: 33.33333%;
				}

				.row > .off-4-narrow {
					margin-left: 33.33333%;
				}

				.row > .col-5-narrow {
					width: 41.66667%;
				}

				.row > .off-5-narrow {
					margin-left: 41.66667%;
				}

				.row > .col-6-narrow {
					width: 50%;
				}

				.row > .off-6-narrow {
					margin-left: 50%;
				}

				.row > .col-7-narrow {
					width: 58.33333%;
				}

				.row > .off-7-narrow {
					margin-left: 58.33333%;
				}

				.row > .col-8-narrow {
					width: 66.66667%;
				}

				.row > .off-8-narrow {
					margin-left: 66.66667%;
				}

				.row > .col-9-narrow {
					width: 75%;
				}

				.row > .off-9-narrow {
					margin-left: 75%;
				}

				.row > .col-10-narrow {
					width: 83.33333%;
				}

				.row > .off-10-narrow {
					margin-left: 83.33333%;
				}

				.row > .col-11-narrow {
					width: 91.66667%;
				}

				.row > .off-11-narrow {
					margin-left: 91.66667%;
				}

				.row > .col-12-narrow {
					width: 100%;
				}

				.row > .off-12-narrow {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0px;
					margin-left: 0px;
				}

					.row.gtr-0 > * {
						padding: 0px 0 0 0px;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0px;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0px;
						}

				.row.gtr-25 {
					margin-top: -8px;
					margin-left: -8px;
				}

					.row.gtr-25 > * {
						padding: 8px 4px 0 4px;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -8px;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 8px;
						}

				.row.gtr-50 {
					margin-top: -16px;
					margin-left: -16px;
				}

					.row.gtr-50 > * {
						padding: 16px 0 0 16px;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -16px;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 16px;
						}

				.row {
					margin-top: -32px;
					margin-left: -32px;
				}

					.row > * {
						padding: 40px 16px 0 16px;
					}

					.row.gtr-uniform {
						margin-top: -32px;
					}

						.row.gtr-uniform > * {
							padding-top: 32px;
						}

				.row.gtr-150 {
					margin-top: -48px;
					margin-left: -48px;
				}

					.row.gtr-150 > * {
						padding: 48px 0 0 48px;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -48px;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 48px;
						}

				.row.gtr-200 {
					margin-top: -64px;
					margin-left: -64px;
				}

					.row.gtr-200 > * {
						padding: 64px 0 0 64px;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -64px;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 64px;
						}

		}

		@media screen and (max-width: 750px) {

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-narrower {
					order: -1;
				}

				.row > .col-1-narrower {
					width: 8.33333%;
				}

				.row > .off-1-narrower {
					margin-left: 8.33333%;
				}

				.row > .col-2-narrower {
					width: 16.66667%;
				}

				.row > .off-2-narrower {
					margin-left: 16.66667%;
				}

				.row > .col-3-narrower {
					width: 25%;
				}

				.row > .off-3-narrower {
					margin-left: 25%;
				}

				.row > .col-4-narrower {
					width: 33.33333%;
				}

				.row > .off-4-narrower {
					margin-left: 33.33333%;
				}

				.row > .col-5-narrower {
					width: 41.66667%;
				}

				.row > .off-5-narrower {
					margin-left: 41.66667%;
				}

				.row > .col-6-narrower {
					width: 50%;
				}

				.row > .off-6-narrower {
					margin-left: 50%;
				}

				.row > .col-7-narrower {
					width: 58.33333%;
				}

				.row > .off-7-narrower {
					margin-left: 58.33333%;
				}

				.row > .col-8-narrower {
					width: 66.66667%;
				}

				.row > .off-8-narrower {
					margin-left: 66.66667%;
				}

				.row > .col-9-narrower {
					width: 75%;
				}

				.row > .off-9-narrower {
					margin-left: 75%;
				}

				.row > .col-10-narrower {
					width: 83.33333%;
				}

				.row > .off-10-narrower {
					margin-left: 83.33333%;
				}

				.row > .col-11-narrower {
					width: 91.66667%;
				}

				.row > .off-11-narrower {
					margin-left: 91.66667%;
				}

				.row > .col-12-narrower {
					width: 100%;
				}

				.row > .off-12-narrower {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0px;
					margin-left: 0px;
				}

					.row.gtr-0 > * {
						padding: 0px 0 0 0px;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0px;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0px;
						}

				.row.gtr-25 {
					margin-top: -8px;
					margin-left: -8px;
				}

					.row.gtr-25 > * {
						padding: 8px 4px 0 4px;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -8px;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 8px;
						}

				.row.gtr-50 {
					margin-top: -16px;
					margin-left: -16px;
				}

					.row.gtr-50 > * {
						padding: 16px 0 0 16px;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -16px;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 16px;
						}

				.row {
					margin-top: -32px;
					margin-left: -32px;
				}

					.row > * {
						padding: 32px 16px 0 16px;
					}

					.row.gtr-uniform {
						margin-top: -32px;
					}

						.row.gtr-uniform > * {
							padding-top: 32px;
						}

				.row.gtr-150 {
					margin-top: -48px;
					margin-left: -48px;
				}

					.row.gtr-150 > * {
						padding: 48px 0 0 48px;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -48px;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 48px;
						}

				.row.gtr-200 {
					margin-top: -64px;
					margin-left: -64px;
				}

					.row.gtr-200 > * {
						padding: 64px 0 0 64px;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -64px;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 64px;
						}

		}

		@media screen and (max-width: 600px) {

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-mobile {
					order: -1;
				}

				.row > .col-1-mobile {
					width: 8.33333%;
				}

				.row > .off-1-mobile {
					margin-left: 8.33333%;
				}

				.row > .col-2-mobile {
					width: 16.66667%;
				}

				.row > .off-2-mobile {
					margin-left: 16.66667%;
				}

				.row > .col-3-mobile {
					width: 25%;
				}

				.row > .off-3-mobile {
					margin-left: 25%;
				}

				.row > .col-4-mobile {
					width: 33.33333%;
				}

				.row > .off-4-mobile {
					margin-left: 33.33333%;
				}

				.row > .col-5-mobile {
					width: 41.66667%;
				}

				.row > .off-5-mobile {
					margin-left: 41.66667%;
				}

				.row > .col-6-mobile {
					width: 50%;
				}

				.row > .off-6-mobile {
					margin-left: 50%;
				}

				.row > .col-7-mobile {
					width: 58.33333%;
				}

				.row > .off-7-mobile {
					margin-left: 58.33333%;
				}

				.row > .col-8-mobile {
					width: 66.66667%;
				}

				.row > .off-8-mobile {
					margin-left: 66.66667%;
				}

				.row > .col-9-mobile {
					width: 75%;
				}

				.row > .off-9-mobile {
					margin-left: 75%;
				}

				.row > .col-10-mobile {
					width: 83.33333%;
				}

				.row > .off-10-mobile {
					margin-left: 83.33333%;
				}

				.row > .col-11-mobile {
					width: 91.66667%;
				}

				.row > .off-11-mobile {
					margin-left: 91.66667%;
				}

				.row > .col-12-mobile {
					width: 100%;
				}

				.row > .off-12-mobile {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0px;
					margin-left: 0px;
				}

					.row.gtr-0 > * {
						padding: 0px 0 0 0px;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0px;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0px;
						}

				.row.gtr-25 {
					margin-top: -5px;
					margin-left: -5px;
				}

					.row.gtr-25 > * {
						padding: 5px 2.5px 0 2.5px;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -5px;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 5px;
						}

				.row.gtr-50 {
					margin-top: -10px;
					margin-left: -10px;
				}

					.row.gtr-50 > * {
						padding: 10px 0 0 10px;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -10px;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 10px;
						}

				.row {
					margin-top: -20px;
					margin-left: -20px;
				}

					.row > * {
						padding: 20px 10px 0 10px;
					}

					.row.gtr-uniform {
						margin-top: -20px;
					}

						.row.gtr-uniform > * {
							padding-top: 20px;
						}

				.row.gtr-150 {
					margin-top: -30px;
					margin-left: -30px;
				}

					.row.gtr-150 > * {
						padding: 30px 0 0 30px;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -30px;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 30px;
						}

				.row.gtr-200 {
					margin-top: -40px;
					margin-left: -40px;
				}

					.row.gtr-200 > * {
						padding: 40px 0 0 40px;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -40px;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 40px;
						}

		}




/* Sections/Article */

	section, article {
		margin-bottom: 6em;
	}

		section > :last-child, section:last-child, article > :last-child, article:last-child {
			margin-bottom: 0;
		}

		section.special > header, section.special > footer, article.special > header, article.special > footer {
			text-align: center;
		}

	.row > section, .row > article {
		margin-bottom: 0;
	}

	article > header {
	margin-bottom: 2em;
	}

	header {
		margin: 0 0 5em 0;
	}

		header > p {
			display: block;
			margin: 2em 0 5em 0;
			text-align: inherit;
			line-height: 180%;
		}

	footer {
		margin: 2.5em 0 0 0;
	}

/* Image */

	.image {
		position: relative;
		display: inline-block;
		border: 0;
		outline: 0;
	}

		.image img {
			display: block;
			width: 100%;
		}

		.image.fit {
			display: block;
			width: 100%;
		}

.image.grad {
    display: block;
    width: 100%;
    height: 50vh;          /* 1. 높이를 화면의 절반으로 제한 */
    margin: 0 0 2em 0;
    position: relative;    /* 캡션과 그라데이션의 기준점 */
    overflow: hidden;      /* 넘치는 이미지 커팅 */
}

.image.grad img {
    width: 100%;
    height: 100%;
    object-fit: cover;     /* 2. 비율 유지하며 영역 꽉 채우기 (중요) */
    object-position: center; /* 이미지 중앙 기준 자르기 */
}

/* 3. 하단 검정 그라데이션 (캡션 가독성 향상) */
.image.grad::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 60%;          /* 하단에서부터 60% 정도만 그라데이션 */
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
    pointer-events: none;  /* 클릭 방해 금지 */
}

/* 4. 사진 위 스튜디오 제목 캡션 */
.image.grad .caption {
    position: absolute;
    bottom: 1.5em;        /* 아래에서 1.5em 띄움 */
    left: 1.5em;          /* 왼쪽에서 1.5em 띄움 */
    z-index: 10;          /* 그라데이션보다 위로 */
    color: #fff;
    font-size: 1.8em;     /* 캡션 크기 (취향껏 조절) */
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    margin: 0;
}

		.image.left {
			float: left;
			margin: 0 2em 2em 0;
		}

		.image.centered {
			display: block;
			margin: 0 0 2em 0;
		}

			.image.centered img {
				margin: 0 auto;
				width: auto;
			}

/* List */

	ul {
		list-style: disc;
		padding-left: 1em;
	}

		ul li {
			padding-left: 0.5em;
		}

	ol {
		list-style: decimal;
		padding-left: 1.25em;
	}

		ol li {
			padding-left: 0.25em;
		}

/* Actions */

	ul.actions {
		margin: 3em 0 0 0;
		list-style: none;
		padding-left: 0;
	}

		form ul.actions {
			margin-top: 0;
		}

		ul.actions li {
			display: inline-block;
			margin: 0 0.75em 0 0.75em;
			padding-left: 0;
		}

			ul.actions li:first-child {
				margin-left: 0;
			}

			ul.actions li:last-child {
				margin-right: 0;
			}

/* Divided */

	ul.divided {
		list-style: none;
		padding-left: 0;
	}

		ul.divided li {
			border-top: solid 1px rgba(128, 128, 128, 0.2);
			padding-top: 1.5em;
			margin-top: 1.5em;
			padding-left: 0;
		}

			ul.divided li:first-child {
				border-top: 0;
				padding-top: 0;
				margin-top: 0;
			}

/* Menu */

	ul.menu {
		height: 1em;
		line-height: 100%;
		list-style: none;
		padding-left: 0;
	}

		ul.menu li {
			display: inline-block;
			border-left: solid 1px rgba(128, 128, 128, 0.2);
			padding-left: 1.25em;
			margin-left: 1.25em;
		}

			ul.menu li:first-child {
				border-left: 0;
				padding-left: 0;
				margin-left: 0;
			}

/* Icons */

.icon-list {
    display: grid;
    /* ✨ 핵심: auto-fit 대신 1fr 1fr로 2열을 강제하되, 
       화면이 너무 좁아지면(480px 이하 등) 1열로 바뀌게 설정합니다. */
    grid-template-columns: repeat(2, 1fr); 
    gap: 40px 30px;
    margin: 1.5em auto 0 auto; /* 중앙 정렬을 위해 auto 추가 */
    padding: 0;
    list-style: none;
}

.icon-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    /* 부모 그리드 안에서 한 줄을 다 쓰지 않도록 설정 */
    min-width: 0; 
	color: var(--point-color);
}

.icon-list li #icon {
    flex-shrink: 0; /* 화면이 좁아져도 아이콘 크기는 유지 */
    font-size: 1em;
    width: 1.2em;
    height: 1.2em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-list li .caption {
	font-family: 'Montserrat', 'GMarketSans', sans-serif;
	font-weight: 500;
    font-size: 0.72em;
    opacity: 0.8;
    line-height: 120%;
    /* 아주 좁은 화면에서 글자가 길면 다음 줄로 넘어가게 함 */
    white-space: normal; 
    word-break: keep-all; /* 단어 단위로 깔끔하게 줄바꿈 */
	color: var(--color-white);
}

/* --- 초소형 기기 (약 350px 이하) 대응 --- */
@media screen and (max-width: 350px) {
    .icon-list {
        grid-template-columns: 1fr; /* 무조건 한 줄로 */
        gap: 8px;
    }
}

.social-icons-wrapper {
    display: flex;          /* 가로 정렬의 핵심 */
	flex-wrap: wrap;
    justify-content: center; /* 가운데 정렬 (왼쪽 정렬 원하면 flex-start) */
    gap: 20px;              /* 아이콘 사이의 간격 */
    padding: 1em 0 3em 0;
}

.social-icons-wrapper .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;            /* 동그라미 크기 */
    height: 30px;
	flex-shrink: 0;
    transition: all 0.3s ease;
    text-decoration: none;
}

/* 마우스 올렸을 때 효과 */
.social-icons-wrapper .icon:hover {
    transform: translateY(-3px); /* 살짝 위로 뜨는 효과 */
}

/* 텍스트 라벨 숨기기 (아이콘만 보이게) */
.social-icons-wrapper .label {
    display: none;
}


	ul.icons {
		position: relative;
		background: rgba(128, 128, 128, 0.05);
		border-radius: 4em;
		display: inline-block;
		padding: 0.35em 0.75em 0.35em 0.75em;
		font-size: 1.25em;
		cursor: default;
		list-style: none;
	}

		ul.icons li {
			display: inline-block;
			padding-left: 0;
		}

			ul.icons li a {
				display: inline-block;
				background: none;
				width: 2.5em;
				height: 2.5em;
				line-height: 250%;
				text-align: center;
				border-radius: 100%;
				border: 0;
				color: inherit;
			}

				ul.icons li a:hover {
					color: var(--point-color);
				}

/* Form */

	form label {
		display: block;
		font-weight: 400;
		color: #483949;
		margin: 0 0 1em 0;
	}

	form input[type="text"],
	form input[type="email"],
	form input[type="password"],
	form select,
	form textarea {
		-webkit-appearance: none;
		display: block;
		border: 0;
		background: #fafafa;
		width: 100%;
		border: solid 1px #E5E5E5;
		padding: 1em;
		-moz-transition: background-color 0.35s ease-in-out, border-color 0.35s ease-in-out;
		-webkit-transition: background-color 0.35s ease-in-out, border-color 0.35s ease-in-out;
		-ms-transition: background-color 0.35s ease-in-out, border-color 0.35s ease-in-out;
		transition: background-color 0.35s ease-in-out, border-color 0.35s ease-in-out;
	}

		form input[type="text"]:focus,
		form input[type="email"]:focus,
		form input[type="password"]:focus,
		form select:focus,
		form textarea:focus {
			background: #fff;
			border-color: var(--point-color);
		}

	form input[type="text"],
	form input[type="email"],
	form input[type="password"],
	form select {
		line-height: 100%;
	}

	form textarea {
		min-height: 9em;
	}

	form ::-webkit-input-placeholder {
		color: #555 !important;
	}

	form :-moz-placeholder {
		color: #555 !important;
	}

	form ::-moz-placeholder {
		color: #555 !important;
	}

	form :-ms-input-placeholder {
		color: #555 !important;
	}

	form ::-moz-focus-inner {
		border: 0;
	}

/* Table */

	table {
		width: 100%;
	}

		table.default {
			width: 100%;
		}

			table.default tbody tr {
				border-top: solid 1px #e5e5e5;
			}

				table.default tbody tr:first-child {
					border-top: 0;
				}

				table.default tbody tr:nth-child(2n+1) {
					background: #fafafa;
				}

			table.default td {
				padding: 0.5em 1em 0.5em 1em;
			}

			table.default th {
				text-align: left;
				font-weight: 400;
				padding: 0.5em 1em 0.5em 1em;
			}

			table.default thead {
				border-bottom: solid 2px #e5e5e5;
			}

			table.default tfoot {
				border-top: solid 2px #e5e5e5;
			}

/* Button */

	input[type="button"],
	input[type="submit"],
	input[type="reset"],
	button,
	.button {
		position: relative;
		display: inline-block;
		background: var(--color-gray);
		color: #fff;
		text-align: center;
		border-radius: 0.5em;
		text-decoration: none;
		padding: 0.65em 3em 0.65em 3em;
		border: 0;
		cursor: pointer;
		outline: 0;
		font-weight: 300;
		-moz-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
		-webkit-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
		-ms-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
		transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
	}

		input[type="button"]:hover,
		input[type="submit"]:hover,
		input[type="reset"]:hover,
		button:hover,
		.button:hover {
			color: #fff;
			background: var(--point-color);
		}

		input[type="button"].alt,
		input[type="submit"].alt,
		input[type="reset"].alt,
		button.alt,
		.button.alt {
			background: var(--color-black);
		}

			input[type="button"].alt:hover,
			input[type="submit"].alt:hover,
			input[type="reset"].alt:hover,
			button.alt:hover,
			.button.alt:hover {
				background: #3B353C;
			}



			

.captcha-button-wrapper {
    display: flex;          /* 가로 정렬 */
    align-items: flex-start; /* 위쪽 라인 맞춤 */
    gap: 15px;              /* 리캡차와 버튼 사이 간격 */
    width: 100%;
    margin-top: 20px;
}

/* 리캡차의 고정 너비 유지 */
.g-recaptcha {
    flex-shrink: 0; 
}

/* 버튼이 남은 모든 공간을 차지 */
#cfsubmit {
    flex-grow: 1;           /* 남은 공간 꽉 채우기 */
    height: 78px;           /* 리캡차 높이(약 78px)와 맞춤 */
    margin: 0 !important;   /* 기존 마진 제거 */
    line-height: 120%;      /* 텍스트 중앙 정렬 조절 */
}

/* 모바일 대응: 화면이 좁아지면 세로로 정렬 */
@media screen and (max-width: 600px) {
    .captcha-button-wrapper {
        flex-direction: column;
        align-items: center;
    }
    #cfsubmit {
        width: 100% !important;
    }
}



/* Post */

	.post.stub {
		text-align: center;
	}

		.post.stub header {
			margin: 0;
		}

/* Icons */

.circle {
    position: relative;
    /* inline-block 대신 inline-flex를 사용해 정렬 제어 */
    display: inline-flex; 
    justify-content: center; /* 가로 중앙 정렬 */
    
    background: #2b252c;
    border-radius: 100%;
    
    width: 2em;
    height: 2em;
    
    /* line-height는 삭제하거나 초기화합니다 */
    line-height: 1; 
    
    font-size: 2.5em;
    align-content: center;
}


	.icon {
		text-decoration: none;
		text-decoration: none;
	}

		.icon:before {
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			display: inline-block;
			font-style: normal;
			font-variant: normal;
			text-rendering: auto;
			line-height: 1;
			text-transform: none !important;
			font-weight: 400;
		}

		.icon:before {
			line-height: inherit;
			font-size: 1.25em;
		}

		.icon > .label {
			display: none;
		}

		.icon.solid:before {
			font-weight: 900;
		}

		.icon.brands:before {
		}

		.icon.circled {
			position: relative;
			display: inline-block;
			background: #2b252c;
			color: #fff;
			border-radius: 100%;
			width: 3em;
			height: 3em;
			line-height: 200%;
			text-align: center;
			font-size: 1.25em;
		}

			header .icon.circled {
				margin: 0 0 2em 0;
			}

/* Wrapper */

	.wrapper {
		background: #000;
		margin: 0 0 2em 0;
		padding: 4em 0 2em 0;
	}

		.wrapper.style1 {
			position: relative;
			clip-path: inset(0); /* 내부의 고정 요소를 이 영역 밖으로 못 나가게 자름 */
			overflow: visible !important; /* sticky 작동을 위해 중요 */
			background: #000;
			margin-bottom: 0;
			padding-top: 6em;
			padding-bottom: 0.5em;
		}

		.wrapper.style2 {
			padding-top: 2em;
		}

		.wrapper.style3 {
			background: var(--color-black);
			padding-top: 0;
			padding-bottom: 0;
		}


/* Header */
div#header {
    background: #000; /* 파티클을 위해 검정 배경 유지 */
    position: relative;
    color: #fff;
    text-align: center;
    padding: 10em 0 2em 0;
    cursor: default;
    overflow: hidden; /* 아래로 길어진 캔버스가 삐져나가지 않게 */
}

/* 1. 파티클 컨테이너: 헤더 크기에 딱 맞춤 (비율 왜곡 방지) */
#particle-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* 늘리지 말고 100% 유지 */
    z-index: 1;
}

/* 2. 실제 캔버스: 여기서 transform으로 위치만 조정 */
#particle-slider canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;

    /* 중요: 비율은 그대로 두고 위치만 Y축으로 100px 이동 */
    /* 숫자를 조절해서 원하는 위치를 잡으세요 */
    transform: translateY(30px); 
}


/* 기존 컨텐츠 (파티클 위로 올리기) */
div#header .inner {
    position: relative;
    z-index: 10; /* 파티클보다 높은 숫자 */
    margin: 0;
    display: inline-block;
    vertical-align: middle;
    pointer-events: none; /* 마우스가 배경 파티클에 닿게 함 */
}

/* 로고/버튼 등 클릭은 가능해야 함 */
div#header .inner a, 
div#header .inner img {
    pointer-events: auto;
}

/* 3. 투명 이미지(소스) 설정 초기화 */
div#header h1 img {
    opacity: 0;
    pointer-events: none;
    /* 여기서 padding이나 margin을 주면 비율이 깨질 수 있으니 0으로 잡으세요 */
    margin: 0 auto !important;
    padding: 0 !important;
    height: auto !important;
}
		#header .button {
			display: inline-block;
			border-radius: 100%;
			width: 4.5em;
			height: 4.5em;
			line-height: 200%;
			text-align: center;
			font-size: 1.25em;
			padding: 0;
		}

		#header hr {
			top: 1.5em;
			margin-bottom: 3em;
			border-bottom-color: rgba(192, 192, 192, 0.35);
			box-shadow: inset 0 1px 0 0 rgba(192, 192, 192, 0.35);
		}

			#header hr:before, #header hr:after {
				background: rgba(192, 192, 192, 0.35);
			}

		#header footer {
			margin: 1em 0 0 0;
		}

	body.homepage #header {
		height: 100vh;
		min-height: 40em;
	}

		body.homepage #header h1 {
			font-size: 4em;
		}

		body.homepage #header:after {
			content: '';
			background: #1C0920;
			display: block;
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
			-moz-transition: opacity 2.5s ease-in-out;
			-webkit-transition: opacity 2.5s ease-in-out;
			-ms-transition: opacity 2.5s ease-in-out;
			transition: opacity 2.5s ease-in-out;
			-moz-transition-delay: 0.5s;
			-webkit-transition-delay: 0.5s;
			-ms-transition-delay: 0.5s;
			transition-delay: 0.5s;
		}

	body.homepage.is-preload #header:after {
		opacity: 1;
	}


#nav {
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    color: var(--color-white);
    padding: 0.5em 0 0.5em 0;
    font-size: 0.8em;
    z-index: 11;
    
    /* [수정] 처음에는 투명하게, 애니메이션 추가 */
    background: rgba(0, 0, 0, 0) !important; 
    backdrop-filter: blur(0px);
    transition: background 0.5s ease, backdrop-filter 0.5s ease;
    
    overflow: visible; 
}

/* [추가] 스크롤 시 기존 서식 복구 */
#nav.scrolled {
    background: rgba(0, 0, 0, 0.5) !important; 
    backdrop-filter: blur(5px);
}

        /* --- 로고 스타일 시작 --- */
        #nav .logo {
            position: absolute;
            left: 3em;
            top: 50%;
            transform: translateY(-50%);
            line-height: 0;
        }

        #nav .logo img {
            height: 1.5em; /* 네비바 높이에 맞춰 조절 가능 */
            width: auto;
            display: block;
        }
        /* --- 로고 스타일 끝 --- */

        #nav > ul {
            line-height: 0px;
            position: relative;
            display: inline-block;
            margin: 0;
            height: 21px;
        }

            #nav > ul:before, #nav > ul:after {
                content: '';
                display: block;
                width: 300%;
                position: absolute;
                top: 50%;
                margin-top: -2px;
                height: 5px;
            }

            #nav > ul:before {
                left: 100%;
                margin-left: 1px;
            }

            #nav > ul:after {
                right: 100%;
                margin-right: 1px;
            }

            #nav > ul > li {
                display: inline-block;
                margin: 0 0.5em 0 0.5em;
                border-radius: 0.5em;
                padding: 0.85em;
                border: solid 1px transparent;
                -moz-transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out;
                -webkit-transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out;
                -ms-transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out;
                transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out;
            }

                #nav > ul > li.active {
                    border-color: white;
                }

                #nav > ul > li > a, #nav > ul > li > span {
                    display: block;
                    color: inherit;
                    text-decoration: none;
                    border: 0;
                    outline: 0;
                }

                #nav > ul > li > ul {
                    display: none;
                }

/* 1. 중앙 메뉴는 기존 스타일 유지 (수정 불필요) */

/* 2. 오른쪽으로 분리한 랭귀지 메뉴만 설정 */
#nav > ul.lang-menu {
    position: absolute !important;
    right: 3em !important; /* 오른쪽 끝에서 3em 띄움 (원하는만큼 조절) */
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important; /* 쓸데없이 길어지는 것 방지 */
}

/* 3. 랭귀지 메뉴 뒤에 선(before/after)이 생기는 것 방지 */
#nav > ul.lang-menu:before,
#nav > ul.lang-menu:after {
    display: none !important;
}

/* 4. 언어 선택 드롭다운이 화면 밖으로 나가지 않게 왼쪽 정렬 */
#nav > ul.lang-menu .dropotron {
    left: auto !important;
    right: 0 !important;
    margin-right: -1em; /* 위치 미세조정 */
}

/* 드롭다운 화살표 위치 조정 */
#nav > ul.lang-menu .dropotron:before {
    left: auto !important;
    right: 1.5em !important;
    margin-left: 0 !important;
}

    .dropotron {
        background: rgba(255, 255, 255, 0.975);
        padding: 1em 1.25em 1em 1.25em;
        line-height: 100%;
        height: auto;
        text-align: left;
        border-radius: 0.5em;
        box-shadow: 0 0.15em 0.25em 0 rgba(0, 0, 0, 0.25);
        min-width: 12em;
        margin-top: -1em;
        list-style: none;
    }

        .dropotron li {
            border-top: solid 1px rgba(128, 128, 128, 0.2);
            color: #5b5b5b;
            padding-left: 0;
        }

            .dropotron li:first-child {
                border-top: 0;
            }

            .dropotron li:hover {
                color: var(--point-color);
            }

            .dropotron li a, .dropotron li span {
                display: block;
                border: 0;
                padding: 0.5em 0 0.5em 0;
                -moz-transition: color 0.35s ease-in-out;
                -webkit-transition: color 0.35s ease-in-out;
                -ms-transition: color 0.35s ease-in-out;
                transition: color 0.35s ease-in-out;
            }

        .dropotron.level-0 {
            margin-top: 2em;
            font-size: 0.9em;
        }

            .dropotron.level-0:before {
                content: '';
                position: absolute;
                left: 50%;
                top: -0.7em;
                margin-left: -0.75em;
                border-bottom: solid 0.75em rgba(255, 255, 255, 0.975);
                border-left: solid 0.75em rgba(64, 64, 64, 0);
                border-right: solid 0.75em rgba(64, 64, 64, 0);
            }

/* Banner */

	#banner {
		background: #000;
		text-align: center;
		padding: 6em;
		margin-bottom: 0;
	}

		#banner header > p {
			margin-bottom: 0;
		}

		#banner header > p {
			line-height: 180%;
		}


		#features header > p {
			line-height: 180%;
		}

#portfolio {
	margin-bottom: 0;
}

#features {
	height: 100%;
}


#features, #portfolio {
	color: #fff;
	text-align: center;
}


/* 모바일 대응 (화면 작아지면 한 줄로) */
@media screen and (max-width: 750px) {
    #features .row {
        grid-template-columns: 1fr !important;
    }
}

/* 2. 카드 내부 설정 */
#features article.special {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important; /* 부모 그리드 높이를 꽉 채움 */
    margin: 0 !important; /* 그리드에선 마진 대신 gap 사용 */
    width: 100% !important;
}

/* 3. 본문 텍스트 - 남는 공간을 얘가 다 차지함 */
#features article.special p {
    flex-grow: 1 !important; 
    margin-bottom: 2em !important;
}

/* 4. 푸터(버튼) - 항상 카드 맨 아래에 걸림 */
#features article.special footer {
    margin-top: auto !important;
    text-align: center !important;
}

.features-desc {
	padding: 80px 40px 40px 40px;
}


@media screen and (max-width: 750px) {
	.features-desc {
	padding: 20px;
}
}


.features-desc h3{
	margin-bottom: 1em;
}

.features-text h3 {
    display: none;
}

	#features .row {
		margin-top: 0;
	}


@media screen and (max-width: 750px) {

	.features-text h3 {
		display: inline-flex;
		align-items: center;
		gap: 0.8em;
		padding: 0.4em 0.8em 0.4em 0;
		border-radius: 0.3em;
		margin-bottom: 1.2em;
		font-size: 1.1em;

		/* [중요] 여기에 transition이 있어야 전체가 부드럽게 움직입니다. */
		transition: all 0.3s ease-out; 
	}

}

.title-icon {
    color: var(--point-color2);
    display: flex;
    align-items: center;
	font-size: 0.8em;
}

/* 마우스 호버 시: h3 전체가 오른쪽으로 이동 */
.features-desc:hover h3 {
    /* 아이콘과 글자가 동시에 0.5em만큼 밀려납니다. */
    transform: translateX(0.5em); 
    padding: 0.4em 0.8em;
    
    /* 호버 시 배경과 선을 더 밝게 강조해서 가시성을 높입니다. */
    background: rgba(255, 255, 255, 0.1);
    border-left: 0.3em solid var(--point-color2); 
}


/* Content */

	#content > hr {
		top: 3em;
		margin-bottom: 6em;
	}

	#content > section {
		margin-bottom: 0;
	}

/* Sidebar */

	#sidebar > hr {
		top: 3em;
		margin-bottom: 6em;
	}

		#sidebar > hr.first {
			display: none;
		}

	#sidebar > section {
		margin-bottom: 0;
	}

/* Main */

	#main {
		margin-bottom: 0;
	}
		#main h2 {
		color: var(--point-color2);
	}

	#main p {
		text-align: center;
	}

		#main section:first-of-type {
			padding-top: 2em;
		}




		
/* Footer */

	#footer {
		position: relative;
		overflow: hidden;
		padding: 5em 0 3em 0;
		background: var(--color-black);
		color: #fff;
	}

		#footer .icon.circled {
			background: #fff;
			color: #2b252c;
		}

		#footer header {
			text-align: center;
			cursor: default;
		}


		#footer .footer-name {
			font-size: 1.6em;
   			color: var(--point-color2);
    		font-weight: 500;
		}

		#footer h3, #footer h4, #footer h5, #footer h6 {
			color: var(--point-color3);
		}

		#footer h2{
			margin-bottom: 1em;
			color: var(--point-color);
		}

		#footer .contact {
			text-align: center;
		}

			#footer .contact p {
				text-align: center;
				margin: 0 0 3em 0;
			}

		#footer .copyright {
			text-align: center;
			color: rgba(128, 128, 128, 0.75);
			font-size: 0.8em;
			cursor: default;
		}

			#footer .copyright a {
				color: rgba(128, 128, 128, 0.75);
			}

				#footer .copyright a:hover {
					color: rgba(212, 212, 212, 0.85);
				}






#portfolio {
    position: relative;
    /* 1. 배경 이미지 꽉 채우기 설정 */
    background-image: url("../../images/portfolio_bg.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; /* 이미지가 비율을 유지하며 영역을 꽉 채움 */
    background-attachment: fixed; /* 스크롤 시 배경 고정 (선택 사항) */
    padding: 10em 0 5em 0;
    z-index: 1;
    overflow: hidden;
}

/* 2. 블러 효과를 위한 가상 요소 */
#portfolio::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    
    /* 블러 강도 조절 (숫자가 커질수록 더 뿌옇게 됨) */
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px); /* 사파리 브라우저 호환성 */
    
    /* 배경을 살짝 어둡게 깔아주면 글자가 더 잘 보입니다 */
    background-color: rgba(0, 0, 0, 0.7); 
    
    z-index: -1; /* 콘텐츠보다 뒤로 보냄 */
}



/* Carousel */


	.carousel {
		position: relative;
		overflow: hidden;
		padding: 5em 0 3em 0;
		margin-bottom: 0;
		color: var(--color-black);
	}


		.carousel .forward, .carousel .backward {
			position: absolute;
			top: 50%;
			width: 6em;
			height: 12em;
			margin-top: -6em;
			cursor: pointer;
		}

			.carousel .forward:before, .carousel .backward:before {
				content: '';
				display: block;
				width: 6em;
				height: 6em;
				border-radius: 100%;
				background-color: rgba(72, 57, 73, 0.5);
				position: absolute;
				top: 50%;
				margin-top: -3em;
				-moz-transition: background-color 0.35s ease-in-out;
				-webkit-transition: background-color 0.35s ease-in-out;
				-o-transition: background-color 0.35s ease-in-out;
				-ms-transition: background-color 0.35s ease-in-out;
				transition: background-color 0.35s ease-in-out;
				-webkit-backface-visibility: hidden;
			}

			.carousel .forward:after, .carousel .backward:after {
				content: '';
				width: 3em;
				height: 3em;
				position: absolute;
				top: 50%;
				margin: -1.5em 0 0 0;
				background: url("images/arrow.svg") no-repeat center center;
			}

			.carousel .forward:hover:before, .carousel .backward:hover:before {
				background-color: rgba(239, 131, 118, 0.75);
			}

		.carousel .forward {
			right: 0;
		}

			.carousel .forward:before {
				right: -3em;
			}

			.carousel .forward:after {
				right: -0.25em;
			}

		.carousel .backward {
			left: 0;
		}

			.carousel .backward:before {
				left: -3em;
			}

			.carousel .backward:after {
				left: -0.25em;
				-moz-transform: scaleX(-1);
				-webkit-transform: scaleX(-1);
				-ms-transform: scaleX(-1);
				transform: scaleX(-1);
			}

		.carousel .reel {
			white-space: nowrap;
			position: relative;
			-webkit-overflow-scrolling: touch;
			padding: 1em 2em 1em 2em;

			display: flex !important;
    		align-items: stretch !important;
		}

		.carousel article {
			display: flex !important;
    		flex-direction: column;

			flex-shrink: 0 !important;
			width: 18em;
			text-align: center;
			padding: 0 1em 1em 1em;
			margin: 0 2em 0 0;
			white-space: normal;
			opacity: 1.0;
			-moz-transition: opacity 0.75s ease-in-out;
			-webkit-transition: opacity 0.75s ease-in-out;
			-ms-transition: opacity 0.75s ease-in-out;
			transition: opacity 0.75s ease-in-out;
		}

			.carousel article.loading {
				opacity: 0;
			}

			.carousel article .image {
				position: relative;
				left: -1em;
				top: 0;
				width: auto;
				margin-right: -2em;
				margin-bottom: 2em;
			}

			.carousel article p {
				text-align: center;
				flex-grow: 1;
			}



/* Clients */

	#clients {
		text-align: center;
		padding: 8em 0 3em 0;
		margin-bottom: 0;
	}

		#clients header > p {
			margin-bottom: 0;
		}

		#clients header > p {
			line-height: 180%;
		}


		#clients header h2, 
		#clients header h2 strong {
			color: #ffffff !important; /* 흰색으로 지정 */
		}




/* 1. Carousel 상단 여백 제거 */
.clients-carousel {
    padding-top: 0 !important;
    margin-top: 0em;
    padding-bottom: 1em !important;
}

/* 2. 개별 로고 아이템 1:1 정사각 박스 설정 */
.clients-carousel .reel article {
    width: 200px !important;    /* 너비 고정 */
    height: 200px !important;   /* 높이 고정 (1:1 비율) */
    padding: 0 !important;      /* 내부 여백은 이미지에서 조절 */
    margin: 0 !important;
    border: 0;
    
    /* 수직, 수평 중앙 정렬 핵심 */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 3. 이미지 컨테이너 및 이미지 최적화 */
.clients-carousel article .image.featured {
    width: 100% !important;
    height: 120px !important;   /* 로고가 들어갈 가이드 높이 */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    position: relative;
    left: 0 !important;        /* 기존 템플릿의 틀어진 위치 초기화 */
    top: 0 !important;
}

.clients-carousel article .image.featured img {
    /* 1:1 박스 중앙에 오게 하는 핵심 설정 */
    max-width: 80% !important;  /* 박스 너비의 80%까지만 차지 (여유공간) */
    max-height: 100% !important; /* 높이는 120px 박스에 맞춤 */
    width: auto !important;
    height: auto !important;
    object-fit: contain !important; /* 비율 유지하며 중앙 안착 */
    
    margin: 0 auto;
    display: block;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease; /* transition에 filter 포함되도록 all 권장 */
	filter: grayscale(100%));
}

/* 4. 마우스 오버 시 효과 */
.clients-carousel article:hover .image.featured img {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1.1);      /* 살짝 강조 효과 */
}

/* --- 공통: 평소에는 어떤 로고든 "순백색"으로 고정 --- */
.clients-carousel article .image.featured img.wlogo,
.clients-carousel article .image.featured img.ilogo {
    /* brightness(0)으로 검게 만든 후, invert(1)로 하얗게 반전시킵니다. 
       이 조합은 원본 색상에 상관없이 무조건 흰색을 뱉습니다. */
    filter: brightness(0) invert(1) !important;
    opacity: 0.7;
    transition: all 0.3s ease;
}

/* --- 1. wlogo: 마우스 오버 시 "원본 컬러"로 복구 --- */
.clients-carousel article:hover .image.featured img.wlogo {
    /* 모든 필터를 초기화 (0% 또는 1로 설정) */
    filter: brightness(1) invert(0) grayscale(0%) !important;
    opacity: 1;
    transform: scale(1.1);
}

/* --- 2. ilogo: 마우스 오버 시에도 "순백색" 유지 --- */
.clients-carousel article:hover .image.featured img.ilogo {
    /* 오버 시에도 평소와 똑같은 필터를 유지하여 하얗게 보이게 함 */
    filter: brightness(0) invert(1) !important;
    opacity: 1;
    transform: scale(1.1);
}

/* 5. 고객사 텍스트 스타일 */
.clients-carousel article header h3 {
    font-size: 0.75em;
    margin: 15px 0 0 0 !important; /* 로고와 텍스트 사이 간격 */
    color: #888;
    text-align: center;
}

.clients-carousel article:hover header h3 {
    color: #FFF;
}


			
			
/* 포트폴리오 캡션 */


/* 기본 상태: 평소에는 안 보이게 하거나 아주 흐리게 설정 */
.work-socials {
    display: flex !important;
    flex-wrap: wrap;           /* 자리가 좁으면 줄바꿈 */
    justify-content: center;   /* 가운데 정렬 */
    gap: 10px;                 /* 아이콘 사이 간격 */
    margin: 10px 0 10px 0;
    opacity: 0;                /* 평소엔 투명 */
    transition: all 0.3s ease; /* 부드러운 등장 애니메이션 */
}

/* 마우스가 article(작품) 위에 올라가면 아이콘 등장 */
article:hover .work-socials {
    opacity: 1;
}

/* 아이콘 개별 설정 (찌그러짐 방지) */
.work-socials .icon {
    flex-shrink: 0;            /* 절대 납작해지지 않음 */
    width: 30px;               /* 적절한 크기 고정 */
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.1); /* 살짝 배경색 */
    border-radius: 50%;
    font-size: 14px !important;
    text-decoration: none;
}

/* 텍스트 라벨은 무조건 숨김 */
.work-socials .label {
    display: none;
}

.reel article h3 {
    margin-bottom: 0.5em !important;
}



/* 캡션을 위한 컨테이너 설정 */
.work-item {
    position: relative;
    display: block;
    overflow: hidden;
}

/* 마우스 오버 시 이미지가 살짝 커지는 효과 (선택사항) */
.work-item img {
    transition: transform 0.5s ease;
}
.work-item:hover img {
    transform: scale(1.1);
}

/* 캡션 기본 상태 (투명) */
.work-item .caption {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); /* 배경 어둡게 */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    text-align: center;
    padding: 10px;
}

/* 마우스 오버 시 캡션 등장 */
.work-item:hover .caption {
    opacity: 1;
}

/* 텍스트 스타일링 */
.work-item .title {
    color: #fff !important;
    font-size: 1em;
    font-weight: 600;
    margin-bottom: 5px !important;
    transform: translateY(10px);
    transition: transform 0.3s ease;
}

.work-item .client {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 0.8em;
	line-height: 120%;
    margin: 0 !important;
    transform: translateY(10px);
    transition: transform 0.3s ease;
}

/* 마우스 오버 시 텍스트가 살짝 위로 올라오는 효과 */
.work-item:hover .title,
.work-item:hover .client {
    transform: translateY(0);
}

.work-desc {
    font-size: 0.8em !important; /* 카테고리(p)보다 조금 더 작게 */
	line-height: 180%;
    word-break: keep-all;        /* 한글 단어가 중간에 끊기지 않게 함 */
    font-weight: 300;            /* 글자를 얇게 해서 세련된 느낌 추가 */
}


/* Wide */

	@media screen and (max-width: 1680px) {



.container-flex h1 {
    font-size: 1.5em;
}


		/* Basic */

			body, input, textarea, select {
				font-size: 14pt;
				line-height: 175%;
			}

		/* Carousel */

			.carousel {
				padding: 3em 0 3em 0;
			}

				.carousel .reel {
					padding: 0 1.5em 0 1.5em;
				}

				.carousel article {
					width: 18em;
					margin: 0 1.25em 0 0;
				}

			.client-container {
			padding-left: 30px !important;  /* 좌측 여백 */
			padding-right: 30px !important; /* 우측 여백 */
			padding-bottom: 30px;
		}

	}

/* Normal */

	@media screen and (max-width: 1280px) {

		/* Basic */

			body, input, textarea, select {
				font-size: 12pt;
				line-height: 150%;
			}

		/* Header */

			#header {
				background-attachment: scroll;
			}

				#header .inner {
					padding-left: 2em;
					padding-right: 2em;
				}

		/* Banner */

			#banner {
				padding-left: 2em;
				padding-right: 2em;
			}

		/* Footer */

			#footer {
				padding-left: 2em;
				padding-right: 2em;
			}


	}

/* Narrow */




	@media screen and (max-width: 960px) {



		.hero .title-block {
			padding: 3em;
		}


	}


/* Narrower */



	#navPanel, #titleBar {
		display: none;
	}

	@media screen and (max-width: 750px) {


.alt-features-item {
    padding-top: 4em;
}


.special-padding {
    padding: 0 2em; /* 좌우에 30px 패딩 */
}





		/* Nav */

			#nav {
				display: none;
			}


			#page-wrapper {
				-moz-backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				backface-visibility: hidden;
				-moz-transition: -moz-transform 0.5s ease;
				-webkit-transition: -webkit-transform 0.5s ease;
				-ms-transition: -ms-transform 0.5s ease;
				transition: transform 0.5s ease;
				padding-bottom: 1px;
			}

			#navButton {
				-moz-backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				backface-visibility: hidden;
				-moz-transition: -moz-transform 0.5s ease;
				-webkit-transition: -webkit-transform 0.5s ease;
				-ms-transition: -ms-transform 0.5s ease;
				transition: transform 0.5s ease;
				display: block;
				height: 44px;
				left: 0;
				position: fixed;
				top: 0;
				width: 100%;
				z-index: 12;
			}

				#navButton .toggle {
					text-decoration: none;
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					border: 0;
					outline: 0;
				}

					#navButton .toggle:before {
						-moz-osx-font-smoothing: grayscale;
						-webkit-font-smoothing: antialiased;
						display: inline-block;
						font-style: normal;
						font-variant: normal;
						text-rendering: auto;
						line-height: 1;
						text-transform: none !important;
						font-weight: 900;
					}

					#navButton .toggle:before {
						font-family: "Font Awesome 6 Free" !important;
						text-decoration: none;
						font-style: normal;
						content: '\f0c9';
						color: #fff;
						color: rgba(255, 255, 255, 0.75);
						text-align: center;
						display: block;
						font-size: 14px;
						height: 50px;
						line-height: 120%;
						position: absolute;
						right: 5%;
						margin-left: -40px;
						border-top: 0;
						border-radius: 0 0 0.35em 0.35em;
					}

			#navPanel {
				-moz-backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				backface-visibility: hidden;
				-moz-transform: translateY(-50vh);
				-webkit-transform: translateY(-50vh);
				-ms-transform: translateY(-50vh);
				transform: translateY(-50vh);
				-moz-transition: -moz-transform 0.5s ease;
				-webkit-transition: -webkit-transform 0.5s ease;
				-ms-transition: -ms-transform 0.5s ease;
				transition: transform 0.5s ease;
				display: block;
				height: 50vh;
				left: 0;
				overflow-y: auto;
				position: fixed;
				top: 0;
				width: 100%;
				z-index: 13;
				background: var(--color-gray);
				box-shadow: inset 0px -2px 5px 0px rgba(0, 0, 0, 0.25);
				font-size: 1em;
			}

				#navPanel:before {
					content: '';
					display: block;
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					background: url("images/overlay.png");
					background-size: 128px 128px;
				}

				#navPanel .link {
					position: relative;
					z-index: 1;
					display: block;
					text-decoration: none;
					padding: 0.5em;
					color: #ddd;
					border: 0;
					border-top: dotted 1px rgba(255, 255, 255, 0.05);
				}

					#navPanel .link:first-child {
						border-top: 0;
					}

					#navPanel .link.depth-0 {
						color: #fff;
						font-weight: 600;
					}

				#navPanel .indent-1 {
					display: inline-block;
					width: 1em;
				}

				#navPanel .indent-2 {
					display: inline-block;
					width: 2em;
				}

				#navPanel .indent-3 {
					display: inline-block;
					width: 3em;
				}

				#navPanel .indent-4 {
					display: inline-block;
					width: 4em;
				}

				#navPanel .indent-5 {
					display: inline-block;
					width: 5em;
				}

				#navPanel .depth-0 {
					color: #fff;
				}

			body.navPanel-visible #page-wrapper {
				-moz-transform: translateY(50vh);
				-webkit-transform: translateY(50vh);
				-ms-transform: translateY(50vh);
				transform: translateY(50vh);
			}

			body.navPanel-visible #navButton {
				-moz-transform: translateY(50vh);
				-webkit-transform: translateY(50vh);
				-ms-transform: translateY(50vh);
				transform: translateY(50vh);
			}

			body.navPanel-visible #navPanel {
				-moz-transform: translateY(0);
				-webkit-transform: translateY(0);
				-ms-transform: translateY(0);
				transform: translateY(0);
			}


			




		/* Basic */


		.hero .title-block {
			padding: 5em;
		}

			body, input, textarea, select {
				font-size: 13pt;
				line-height: 165%;
			}

			.tweet {
				text-align: center;
			}

			.timestamp {
				display: block;
				text-align: center;
			}

		/* Footer */

			#footer {
				padding: 4em 2em 4em 2em;
			}

		/* Carousel */

			.carousel {
				padding: 4em 0 1.5em 0;
			}

				.carousel article {
					width: 18em;
					margin: 0 1em 0 0;
				}


			
			.client-container {
			padding-left: 16px !important;  /* 좌측 여백 */
			padding-right: 16px !important; /* 우측 여백 */
			padding-bottom: 20px;
		}

	}

/* Mobile */

	@media screen and (max-width: 600px) {



.special-padding {
    padding: 0; /* 좌우에 30px 패딩 */
}





.boxed p {
	padding:20px;
}

.social-icons-wrapper {
    gap: 10px;              /* 아이콘 사이의 간격 */
}



body::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

		.hero .title-block {
			padding: 1em;
		}
		
		#navPanel {padding: 10px;}

		/* Basic */


			body, input, textarea, select {
				font-size: 12pt;
				line-height: 150%;
			}

			h2 {
				font-size: 1.5em;
			}

			h3 {
				font-size: 1em;
			}

			hr {
				top: 2em;
				margin-bottom: 3em;
			}

		/* Section/Article */

			section, article {
				margin-bottom: 2em;
			}

				section:last-child, article:last-child {
					margin-bottom: 0;
				}

			.row > section, .row > article {
				margin-bottom: 2em;
			}

			header > p {
				font-size: 1.25em;
			}

		/* Image */

			.image.featured {
				margin: 0 0 2em 0;
			}

			.image.left {
				margin: 0 1em 1em 0;
			}

			.image.centered {
				margin: 0 0 1em 0;
			}

		/* Actions */

			form ul.actions {
				margin-top: 0;
			}

			ul.actions li {
				display: block;
				margin: 0.75em 0 0 0;
			}

				ul.actions li:first-child {
					margin-top: 0;
				}

		/* Menu */

			ul.menu {
				height: auto;
				text-align: center;
			}

				ul.menu li {
					display: block;
					border: 0;
					padding: 0.75em 0 0 0;
					margin: 0;
				}

					ul.menu li:first-child {
						padding-top: 0;
					}

		/* Icons */

			ul.icons {
				font-size: 1em;
				padding: 0.35em 0.5em 0.35em 0.5em;
			}

				ul.icons li a {
					width: 2.25em;
				}

		/* Button */

			input[type="button"],
			input[type="submit"],
			input[type="reset"],
			button,
			.button {
				display: block;
				padding: 0;
				line-height: 200%;
				width: 100%;
			}



		/* Wrapper */

			.wrapper {
				padding: 2em 0.5em 2em 0.5em;
			}

		/* Header */

			#header {
				background-attachment: scroll;
				padding: 2.5em 0 0 0;
			}

				#header .inner {
					padding-top: 1.5em;
					padding-left: 1em;
					padding-right: 1em;
				}

				#header header > p {
					font-size: 1em;
				}

				#header h1 {
					font-size: 1.75em;
				}

				#header hr {
					top: 1em;
					margin-bottom: 2.5em;
				}

			body.homepage #header {
				min-height: 0;
				padding: 5.5em 0 5em 0;
				height: auto;
			}

				body.homepage #header:before {
					display: none;
				}

				body.homepage #header h1 {
					font-size: 2.5em;
				}

		/* Banner */

			#banner {
				padding: 2em 1em 2em 1em;
			}

		/* Sidebar */

			#sidebar > hr:first-of-type {
				display: block;
			}

		/* Main */

			#main > header {
				text-align: center;
			}

			#main header > p {
			line-height: 180%;
			}

		/* Footer */

			#footer {
				padding-left: 1em;
				padding-right: 1em;
			}

		/* Carousel */

			.carousel {
				padding: 2.5em 0 0.5em 0;
			}

				.carousel .reel {
					padding: 0 0.5em 0 0.5em;
				}

				.carousel article {
					width: 14em;
					padding-bottom: 2em;
					margin: 0 0.5em 0 0;
				}

					.carousel article .image {
						margin-bottom: 2em;
					}


			
			.client-container {
			padding-left: 30px !important;  /* 좌측 여백 */
			padding-right: 30px !important; /* 우측 여백 */
			padding-bottom: 10px;
		}

	





/* 1. 부모 래퍼 가두기 해제 */
    .wrapper.style1.musa-wrapper-zone {
        clip-path: none !important;
        overflow-y: visible !important;
    }

    /* 2. 배경 고정 해제 */
    .musa-fixed-bg {
        position: absolute !important; /* 화면을 따라오지 않게 함 */
        height: 100% !important;
        top: 0 !important;
		transform: scale(1) !important;
		margin: 0 !important;
    }

    /* 3. 시퀀스 높이 해제 */
    .musa-scroll-sequence {
        height: auto !important;
        margin-top: 0 !important;
    }

    /* 4. 스티키 컨테이너 - 이게 고정의 주범입니다 */
    .musa-sticky-container {
        position: relative !important; /* 고정 해제 */
        top: 0 !important;
        height: auto !important;
        display: block !important;
    }

    /* 5. 텍스트 채우기 효과 완전 무력화 */
    .musa-fill-text {
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
        background: none !important;
        background-clip: border-box !important;
        -webkit-background-clip: border-box !important;
        opacity: 1 !important;
    }



.musa-fill-text header > p{
	font-size: 2em;
	margin: 0.1em 0 0.1em 0;
}

	
	
	}





/* new stuffs */

html {
  font-size: 6.9444444444vw;
}

:root {
  --main-font: "Source Sans Pro", 'GMarketSans', sans-serif;
  --sub-font: "Source Sans Pro", 'GMarketSans', sans-serif;
  --color-black: #000;
  --color-white: #fff;
  --color-gray: #333333;
  --point-color: #f8166c;
  --point-color2: #00d1ff;
  --point-color3: #efbbff;
  --point-color4: #FFFF00;

  --font-size-h1: 1.41rem;
  --font-size-desc-1: 0.16rem;
  --font-size-desc-2: 0.16rem;
  --font-size-NavBar-text-1: 0.14rem;
  --font-size-btn-1: 0.18rem;
  --font-size-btn-2: 0.18rem;
  
  --line-height-h1: 1.26rem;
  --line-height-desc-1: 0.16rem;
  --line-height-desc-2: 0.16rem;
  --line-height-NavBar-text-1: 0.14rem;
  --line-height-btn-1: 0.18rem;
  --line-height-btn-2: 0.18rem;
}

.title-h1 {
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  font-weight: 700;
  color: var(--color-white);
  font-family: var(--main-font);
}
.desc-1 {
  font-size: var(--font-size-desc-1);
  line-height: var(--line-height-desc-1);
  font-weight: 500;
  color: var(--color-white);
  font-family: var(--sub-font);
}
.desc-2 {
  font-size: var(--font-size-desc-2);
  line-height: var(--line-height-desc-2);
  font-weight: 600;
  color: var(--color-white);
  font-family: var(--sub-font);
}
.NavBar-text-1 {
  font-size: var(--font-size-NavBar-text-1);
  line-height: var(--line-height-NavBar-text-1);
  font-weight: 500;
  color: var(--color-white);
  font-family: var(--sub-font);
}
.btn-1 {
  font-size: var(--font-size-btn-2);
  line-height: var(--line-height-btn-2);
  font-weight: 500;
  color: var(--color-white);
  font-family: var(--sub-font);
}
.btn-2 {
  font-size: var(--font-size-btn-1);
  line-height: var(--line-height-btn-1);
  font-weight: 600;
  color: var(--color-white);
  font-family: var(--sub-font);
}

.btn-2 img{
  max-height: 3vh;
}

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

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

img {
  display: block;
  user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

/* extra long transition to hide blue autofill background */
input:-webkit-autofill,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:focus {
  -webkit-transition: background-color 100000000000000000000000000000s 0s, color 100000000000000000000000000000s 0s;
  transition: background-color 100000000000000000000000000000s 0s, color 100000000000000000000000000000s 0s;
}


input[type=number] {
  -moz-appearance: textfield;
}

body {
  position: relative;
}

.container {
  max-width: 1920px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 0 0.32rem;
}

.NavBar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 0.9rem;
  padding: 0 0.32rem;
  .flex-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    .logo-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    span {
      display: flex;
      &:last-child {
        position: relative;
        left: 0.13rem;
      }
    }
  }
  .NavBar-menu {
    display: flex;
    align-items: center;
    list-style-type: none;
    &__item {
      &:not(:last-child) {
        margin-right: 0.37rem;
      }
      cursor: pointer;
    }
  }
}

.hero {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
  margin-bottom: 0;
  
  .container {
    display: flex;
	justify-content: center;
    align-items: center;
  }




  .title-block {
    position: relative;

	img {
		pointer-events: none !important;
    	user-select: none !important;
    	-webkit-user-drag: none;
	}

	filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.3)) 
            drop-shadow(0 0 30px rgba(255, 255, 255, 0.4));

    .title-h1 {
      text-transform: uppercase;
      span {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
      u {
        text-decoration: none;
        overflow-x: hidden;
        overflow-y: hidden;
      }
      .title-row {
        display: flex;
      }
			.title-row img {
				height: 5rem;
				max-height: 20vh;
				color: inherit;
			}

      .title-charts-cont {
        display: flex;
        overflow: hidden;
      }
      .title-row-2 {
        padding-left: 0.83rem;
      }
	#logoM { margin-right: 0.11rem; }
    #logoU { margin-left: 0.11rem; margin-right: -0.08rem; }
    #logoS { margin-left: -0.08rem;}
    #logoA { margin-right: 0.04rem; }
    #logoI { margin-left: 0.04rem; }
    }
    .first-desc {
      position: absolute;
      top: -0.5rem;
      right: 3.7rem;
      overflow: hidden;
      display: flex;
    }
    .second-desc {
      position: absolute;
      bottom: -1rem;
      left: 4.85rem;
      overflow: hidden;
      display: flex;
    }
  }
  .copyright {
    position: absolute;
    bottom: 0.32rem;
    left: 0.32rem;
    overflow: hidden;
    display: flex;
  }
  .scroll-to {
    position: absolute;
    bottom: 0.32rem;
    left: 7.75rem;
    width: 1.48rem;
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    &__row {
      overflow: hidden;
      display: flex;
    }
  }
  .book-btn {
    position: absolute;
    bottom: 0.32rem;
    right: 0.32rem;
    width: 1.7rem;
    height: 1.7rem;
    display: flex;
    justify-content: center;
    align-items: center;
    &__circle {
      width: 1.7rem;
      height: 1.7rem;
      border: 1px solid var(--color-white);
      border-radius: 100%;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .btn-text {
      width: 1.28rem;
      text-align: center;
      overflow: hidden;
      display: flex;
    }
  }
}




#heropage {
    background-color: #000;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* 쉐이더 배경: 가장 아래 레이어 */
#hero-shader-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
/* Webkit(크롬, 사파리)용 */
  -webkit-mask-image: linear-gradient(
    to bottom, 
    black 0%, 
    black 90%,        /* 90% 지점까지는 꽉 찬 블랙(선명함 유지) */
    rgba(0,0,0,0.8) 98%,  /* 90%~98% 사이는 0.8 정도로 아주 미세하게만 연해짐 */
    transparent 100%     /* 나머지 2% 구간에서 0으로 급락 (완전 소멸) */
  );
  
  /* 표준 속성 */
  mask-image: linear-gradient(
    to bottom, 
    black 0%, 
    black 90%, 
    rgba(0,0,0,0.8) 98%, 
    transparent 100%
  );
}

/* 비네팅: 쉐이더 위에 깊이감을 더함 */
#heropage::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 중앙은 투명하고 외곽으로 갈수록 검게 */
    background: radial-gradient(circle, transparent 20%, rgba(0, 0, 0, 0.8) 100%);
    z-index: 2;
    pointer-events: none;
}



/* 기존 로고 컨텐츠를 리플 위로 올리기 */
#header .inner {
    position: relative;
    z-index: 10;
}

/* 로고 이미지 크기 제한 */
#header .inner h1 #logo img {
    max-width: 20vw; /* 원하는 가로 크기로 조절 (예: 150px, 200px) */
    width: 100%;      /* 부모 너비 내에서 가변적 유지 */
    height: auto;     /* 비율 유지 */
    display: block;   /* 불필요한 하단 공백 제거 */
    margin: 0 auto;   /* 로고 중앙 정렬 */
}


.tp-dfwv {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}







/* 패널 모션 */

.section-expand {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 101%;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  color: #fff;
  transition: all .4s ease;
  position: relative;
}

.section-expand .overlay {
  background-color: rgba(0, 0, 0, 0.4);
  width: 100%;
  height: 100%;
  position: absolute;
  transition: background-color .8s ease;
}

.section-expand .content {
  z-index: 2;
}

.section-expand:hover {
  flex: 2;
  /* 1. 글자 크기: 원하는 만큼 키워주세요 (예: 1.2배) */
    font-size: 2em;
  /* 2. 글자 광선 효과 (Text Glow) */
  /* 가로 세로 번짐정도 색상 순서입니다. 여러 개 겹칠수록 광선이 진해집니다. */
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.6), 
               0 0 20px rgba(255, 255, 255, 0.4);

  /* 4. 부드러운 애니메이션 (필수) */
  transition: all 0.4s ease;
}

.section-expand:hover .overlay {
  background-color: rgba(0, 0, 0, 0);
}

/* 배경 이미지들 */
#PanelSOUND { background-image: url('/images/musai/mx.jpg'); }
#PanelL10N { background-image: url('/images/musai/kb.jpg'); }
#PanelECHO { background-image: url('/images/musai/mic.jpg'); }



/* ------------------------------------------------------------------------------- */
/* Portfolios */
/* ------------------------------------------------------------------------------- */

.slider-group{
	max-width: 1200px;
    margin: 0 auto;
}


.siema-wrapper {
  border-radius: 12px;
  overflow: hidden;
  line-height: 0;
  max-width: 1200px;
    margin: 0 auto;
}

.siema {
  margin: 0;
  display: flex;
}
.siema > div {
  flex-shrink: 0;
  width: 100%;
  display: flex;
  align-items: flex-start;
}
.siema img {
  display: block;
  vertical-align: top;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: 12px !important; /* 원본 styles.css 190행 반영 */
}

.slider-controls {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  margin-top: 16px;
  /* 컨트롤 버튼도 텍스트 라인에 맞추고 싶다면 아래 두 줄 활성화 */
  /* max-width: 600px; margin: 16px auto 0 auto; */
}
.slider-controls button {
  cursor: pointer;
  border: none; /* 기본 보더 제거 */
  border-bottom: 1px solid;
  background: none;
}

/* --- 핵심 수정 부분: 텍스트 요소들만 600px 너비 제한 및 중앙 정렬 --- */


.boxed {
    padding-top: 5em;
	padding-bottom: 5em;
    position: relative; /* 자식인 :before가 이 영역을 기준으로 정렬됨 */
    overflow: hidden;    /* blur 때문에 삐져나온 배경을 깔끔하게 자름 */
    z-index: 1;          /* 내부 글자들이 배경보다 위로 오도록 설정 */
}

.boxed:before {
    content: "";        /* 필수! 이게 없으면 아예 렌더링이 안 됩니다 */
    position: absolute; /* 부모(.boxed)를 기준으로 위치 고정 */
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;        /* 배경이므로 글자 뒤로 보냄 */

    background-image: url("../../images/hero_bg.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    /* 요청하신 흑백 + 블러 + 밝기 조절 */
    filter: grayscale(100%) blur(10px) brightness(0.4);
    
    /* 블러 효과 때문에 가장자리가 하얗게 비어 보일 수 있으니 살짝 키움 */
    transform: scale(1.1);
}


.boxed h2{
	color: var(--point-color2);
	font-weight: 600;
}


.boxed p{
	max-width: 960px;
}



.boxed h2, 
.boxed blockquote {
	max-width: 600px;
}

.boxed h2, 
.boxed p, 
.boxed blockquote {
  width: 100%;
       /* 원본 styles.css 핵심 수치 */
  margin-left: auto;   /* 중앙 정렬 */
  margin-right: auto;  /* 중앙 정렬 */
  text-align: center;
  
}

.boxed .slider-heading {
  margin-bottom: 0.5em;
  color: #FFFF00;
  padding-top: 2em;
}

.boxed p {
  margin-bottom: 2em;
}

.boxed blockquote {
  margin: 0.2em auto;
  font-style: italic;
}

a.cta-project {
  display: inline-block; /* 너비 제한 내 정렬을 위해 */
  text-decoration: none;
  border: 1px solid;
  border-radius: 999px;
  padding: 4px 12px;
  transition: color 0.2s ease-in, border-color 0.2s ease-in;
}

a.cta-project:hover {
  transition: color 0.1s ease-out, border-color 0.1s ease-out;
}

/* 원본 styles.css 127행 hr 수치 */
.boxed hr {
  width: 100%;
  max-width: 600px;
  margin: 0.5rem auto;
  border: 0;
  border-top: 1px solid;
  opacity: 0.1;
}



/* ------------------------------------------------------------------------------- */
/* Musai Interactive Gallery - 3D Position & Visibility Final Fix */
/* ------------------------------------------------------------------------------- */


/* 1. 무한 루프 애니메이션 정의 */
@keyframes wave-loop {
  0% { --p: 0; }
  50% { --p: 12; }   /* 오른쪽 끝까지 갔다가 */
  100% { --p: 0; }   /* 다시 왼쪽으로 돌아옴 */
}

/* 2. 속성 등록 (브라우저가 숫자로 애니메이션 할 수 있게 함) */
@property --p {
  syntax: '<number>';
  inherits: true;
  initial-value: 6.5;
}

#musai-interactive-gallery {
  /* 애니메이션 적용: 5초 동안 부드럽게 무한 반복 */
  animation: wave-loop 5s infinite ease-in-out;
  
  --z: 5;
  --gallery-actual-height: 400px; 
  --hover-intensity: 15px; 
  --perspective: 1000px;
  
  --clr-bg: var(--color-gray)
  --hover-smoothness: 80ms;
  --fall-smoothness: 400ms;

  background: var(--clr-bg);
  width: 100%;
  min-height: 550px; 
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
  position: relative;
}

/* 3. 마우스 호버 시 애니메이션 일시 정지 */
#musai-interactive-gallery:has(a:hover) {
  animation-play-state: paused;
}

#musai-interactive-gallery nav {  
  --r: calc(var(--max-z) * (var(--p) - 1) + var(--z)); 
  --r-n: calc((var(--r) - 1) / (var(--max-z) * var(--max-p) - 1));
  
  height: var(--gallery-actual-height); 
  width: 95%; /* 가로 너비 충분히 확보 */
  
  display: flex;
  align-items: stretch;
  position: relative;
  perspective: var(--perspective);
  transform-style: preserve-3d;
}

/* 1. 이미지 자체의 색감을 죽이는 베이스 필터 (a 태그 부분 수정) */
#musai-interactive-gallery a {  
  flex: 1;
  height: 100% !important;
  position: relative;
  transform-style: preserve-3d;
  transition: 
    flex 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
    filter 0.5s;

  --p-n: calc(var(--i) / (var(--max-p) - 1));
  --diff: calc(var(--p-n) - var(--r-n));  
  --u: calc(abs(var(--diff)) / .5);
  --falloff: clamp(calc(0.5 * (1 + cos(min(var(--u), 1) * 180deg))), 0, 1);
  --tilt: calc(var(--diff) * var(--falloff) * -20deg); 
  
  transform: 
    translateZ(calc(var(--falloff) * var(--hover-intensity))) 
    rotateY(var(--tilt));
  
  /* [수정] 흑백 톤을 베이스로 깔고 밝기를 조절해 쿨톤이 잘 먹게 함 */
  filter: grayscale(0.8) brightness(calc(0.6 + var(--falloff) * 0.5)) contrast(1.2);
  
  overflow: visible;
  display: flex;
}

/* 2. 고급스러운 블루 오버레이 추가 (::after) */
#musai-interactive-gallery a::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  
  /* [추천] 무섭지 않은 고급스러운 네이비 그레이 톤 */
  background-color: rgba(44, 62, 80, 0.4) !important;
  
  /* [핵심] soft-light는 이미지를 덮지 않고 색만 부드럽게 입힙니다 */
  mix-blend-mode: soft-light !important;
  
  /* 3D 환경에서 이미지 바로 위에 붙도록 설정 */
  transform: translateZ(1px);
  pointer-events: none;
  z-index: 2;
  display: block !important;
}

/* 3. 호버 시 쿨톤이 걷히면서 원래 색상이 살짝 돌아오게 (선택 사항) */
#musai-interactive-gallery a:hover {
  filter: grayscale(0.2) brightness(1.1) contrast(1.1);
    flex: 1.4; 
}

#musai-interactive-gallery a:hover::after {
  background-color: rgba(44, 62, 80, 0.1) !important; /* 오버레이 연하게 */
}


#musai-interactive-gallery .img {
/* 1. 경로 인식 강화: !important를 붙여 다른 설정이 방해하지 못하게 함 */
  background-image: var(--img) !important;
  
  /* 2. 이미지 출력 방식 고정 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgba(255, 255, 255, 0.05);

  /* 3. 물리적 공간 강제 확보 (이미지가 로드되는 즉시 보일 수 있게) */
  width: 100%;
  height: 100% !important;
  display: block;

  /* 4. [테스트용] 이미지가 로드될 때까지 기다리는 동안 투명도를 줘서 확인 */
  opacity: 1;
  visibility: visible;
}

/* 덜덜거림 방지 레이어 - 평평할 때 사고 안 나게 inset 조절 */
#musai-interactive-gallery .hover-zone {
  position: absolute;
  inset: 0; 
  display: flex;
  z-index: 13;
  /* 마우스 판을 앞으로 빼서 3D 간섭 원천 차단 */
  transform: translateZ(200px); 
}


/* --- 마우스 추적 (필수) --- */
#musai-interactive-gallery nav:has(a:nth-child(1):hover) { --p: 1; }
#musai-interactive-gallery nav:has(a:nth-child(2):hover) { --p: 2; }
#musai-interactive-gallery nav:has(a:nth-child(3):hover) { --p: 3; }
#musai-interactive-gallery nav:has(a:nth-child(4):hover) { --p: 4; }
#musai-interactive-gallery nav:has(a:nth-child(5):hover) { --p: 5; }
#musai-interactive-gallery nav:has(a:nth-child(6):hover) { --p: 6; }
#musai-interactive-gallery nav:has(a:nth-child(7):hover) { --p: 7; }
#musai-interactive-gallery nav:has(a:nth-child(8):hover) { --p: 8; }
#musai-interactive-gallery nav:has(a:nth-child(9):hover) { --p: 9; }
#musai-interactive-gallery nav:has(a:nth-child(10):hover) { --p: 10; }
#musai-interactive-gallery nav:has(a:nth-child(11):hover) { --p: 11; }
#musai-interactive-gallery nav:has(a:nth-child(12):hover) { --p: 12; }

#musai-interactive-gallery i:nth-child(1):hover { --z: 1; }
#musai-interactive-gallery i:nth-child(2):hover { --z: 2; }
#musai-interactive-gallery i:nth-child(3):hover { --z: 3; }
#musai-interactive-gallery i:nth-child(4):hover { --z: 4; }
#musai-interactive-gallery i:nth-child(5):hover { --z: 5; }
#musai-interactive-gallery i:nth-child(6):hover { --z: 6; }
#musai-interactive-gallery i:nth-child(7):hover { --z: 7; }
#musai-interactive-gallery i:nth-child(8):hover { --z: 8; }
#musai-interactive-gallery i:nth-child(9):hover { --z: 9; }

#musai-interactive-gallery a:hover { flex: 4; }


/* 1. 이미지 자체의 색감을 죽여서 베이스를 통일함 */
.cool-wrapper img {
  /* 그레이스케일을 주면 원본이 어떤 색이든 푸른 톤이 일정하게 먹힙니다 */
  filter: grayscale(80%) contrast(1.1); 
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 2. 그 위에 푸른색 막을 씌움 */
.cool-wrapper {
  position: relative !important;
  display: block; /* 높이/너비 확보를 위해 추가 */
  overflow: hidden;
  z-index: 1;
}

.cool-wrapper::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;   /* 확실하게 꽉 채우기 위해 추가 */
  bottom: 0;  /* 확실하게 꽉 채우기 위해 추가 */
  
  /* 푸른색 톤 레이어 */
  background-color: rgba(44, 62, 80, 0.3) !important; 
  
  /* 합성 모드: overlay는 대비를 살리고, soft-light은 은은합니다 */
  mix-blend-mode: overlay !important; 
  
  z-index: 9999 !important;
  pointer-events: none;
}

.gallery-wrapper {
    position: relative;
    width: 100%;
    overflow-x: auto; /* 마우스 휠이나 터치 스크롤 허용 */
    cursor: e-resize;
    
    /* [수정] flex를 유지하되 safe 키워드 추가 */
    display: flex;
    justify-content: safe center; 
	-ms-overflow-style: none; /* IE, Edge */
    scrollbar-width: none; /* Firefox */
}

.gallery-wrapper::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.gallery-container {
    display: grid;
    grid-template-rows: repeat(8, 1fr);
    grid-auto-flow: column;
    grid-auto-columns: min-content;
    gap: 15px;
    height: 50vh; 
    max-height: 400px;
    
    /* [중요] 스크롤이 가능하도록 최소 너비 보존 */
    min-width: max-content; 

}

/* 개별 아이템 공통: 높이를 100% 채우도록 강제 */
.gallery-group {
    position: relative;
    display: block;
    height: 100%; 
    overflow: hidden;
    background: #111;
}

/* --- 콜라주 배치 규칙 --- */

/* 1. 기본형: 중앙에 위치 */
.gallery-group {
    grid-row: 2 / 7; /* 8칸 중 중간 5칸 차지 */
    width: 300px;
}

/* 2. 위로 긴 사진 (Tall): 전체를 꽉 채움 */
.gallery-group.tall {
    grid-row: 1 / 9; /* 1번부터 8번 끝까지 */
    width: 540px;
}

/* 3. 위쪽에 붙는 사진 (Top) */
.gallery-group.top {
    grid-row: 1 / 5; /* 상단 4칸 */
    width: 240px;
}

/* 4. 아래쪽에 붙는 사진 (Low) */
.gallery-group.low {
    grid-row: 5 / 9; /* 하단 4칸 */
    width: 240px;
}

/* 5. 약간 위로 치우친 중간 사진 (Mid) */
.gallery-group.mid {
    grid-row: 1 / 6;
    width: 270px;
}

/* 이미지 비율 최적화 */
.gallery-group img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 모바일에서는 마우스가 없으므로 터치 스크롤 허용 */
@media screen and (max-width: 768px) {
    .gallery-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}








/* QHD 이상의 큰 화면에서 전체적인 간격 늘리기 */
@media screen and (min-width: 2560px) {

	.boxed {
		padding-top: 8em;
    	padding-bottom: 8em;
	}

	.boxed h2, .boxed blockquote, .boxed p {
    	max-width: 1280px;
	}

	.boxed p {
    	margin-bottom: 3.5em;
	}


	.boxed .slider-heading, #features {
    	padding-top: 4em;
	}

	p {
		font-size: 1.5em;
		line-height: 170%;
	}

	h2 {
		font-size: 4em;
	}

	#portfolio {
		padding: 12em 0 5em 0;
	}



	.carousel .reel {
		padding: 3em 2em 7em 2em;
	}


		header > p {
		margin: 3em 0 5em 0;
	}


	#clients {
		padding: 12em 0 3em 0;
	}

	.container-flex, .row {
    max-width: 2160px;
	}


	#banner {
    padding: 12em 0 9em 0;
	}

	.wrapper.style1 {
		padding-top: 12em;
		padding-bottom: 7em;
	}
	
	header {
		margin-bottom: 4em;
	}


	#musai-interactive-gallery {
		--gallery-actual-height: 500px;
		min-height: 800px;
	}

	hr {
		margin-top: 6em;
		margin-bottom: 15em;
	}

}