@font-face {
	font-family: 'RiaSans-ExtraBold';
	src: url('../fonts/RiaSans-ExtraBold.woff2') format('woff2');
}
@font-face {
	font-family: 'Pretendard-Medium';
	src: url('../fonts/Pretendard-Medium.woff') format('woff');
}
@font-face {
	font-family: 'Pretendard-ExtraBold';
	src: url('../fonts/Pretendard-ExtraBold.woff') format('woff');
}
@font-face {
	font-family: 'BespokeSerif-ExtraBold';
	src: url('../fonts/BespokeSerif-ExtraBold.woff') format('woff');
	font-style: normal;
}

@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+KR:wght@100..900&display=swap');
/* 변수만 추가 (디자인/문구/이미지 경로 변경 없음) */
:root{
	--c-primary:#d10000;
	--c-bg:#000;
	--c-light:#fff;
	--c-text:#232323;
	--c-muted:#fff;
	--c-menu:#d10000;
	--row-gap:60px;
	--row-speed-1:24s;
	--row-speed-2:32s;
	--row-speed-3:28s;
}

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	background-color: var(--c-bg);
	font-family: 'Pretendard-Medium';
	scroll-snap-type: none;
}

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

.main-section { position: relative; }

.snap { scroll-snap-align: start; }

.pc {display:block !important;}
.mobile {display:none !important;}


/* 기존 top div 스타일 (추가) */
.top {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width:100%;
	z-index: 1000;
	transition: background 0.3s ease;
}

/* 그라디에이션 배경 (section01을 벗어났을 때 적용) */
/*.top.with-gradient {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.66) 50%, rgba(255, 255, 255, 0.33) 75%, rgba(255, 255, 255, 0) 100%);
    height: 24vh;
}

.top.black-gradient {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.66) 50%, rgba(0, 0, 0, 0.33) 75%, rgba(0, 0, 0, 0) 100%);
    height: 24vh;
}*/

/* 기존 로고 스타일 수정 */
.main-logo {
	position: relative; /* fixed에서 relative로 변경 */
	top: 35px;
	left: 5%;
	max-width: 208px;
	z-index: 1001;
	transition: filter 0.3s;
}

/* 기존 메뉴 아이콘 스타일 수정 */
.menu_icon {
	position: absolute; /* fixed에서 absolute로 변경 */
	top: 45px;
	right: 5%;
	width: 55px;
	max-width: 20%;
	z-index: 1001;
	cursor: pointer;
	transition: filter 0.3s;
}

.menu_icon:hover { animation: spinTwice 0.5s linear infinite; }

@keyframes spinTwice {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

.page-section {
    position: relative;
    width: 100%;
    height: 1000px;
    min-height: fit-content;
    max-height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0;
}

.background-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
.background-image img { width: 100%; height: 100%; object-fit: cover; }

.main-content {
	position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 340px 10% 60px 10%;
    color: white;
}

.main-title-image { width: 100%; max-width: 660px; height: auto; margin-bottom: 0px; }

.main-subtext {
	font-size: 22px;
	margin-top: 60px;
	line-height: 1.2;
	margin-bottom: 0px;
	text-align: left;
	font-family:'Pretendard-Medium';
	text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* 가로, 세로, 번짐, 색상 */
}

.one_more {
	font-size: 22px;
}

.contact-button {
	display: inline-block;
	margin-top: 32px;
	padding: 13px 32px;
	border: 2px solid white;
	border-radius: 30px;
	color: white;
	font-size: 16px;
	cursor: pointer;
	background:#000;
	transition: background 0.3s, color 0.3s;
	text-align: center;
	margin:100px auto;
}

.contact-button:hover { background: var(--c-primary); color: white; }

.slide-frame {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	opacity: 0;
	transition: opacity 1s ease-in-out;
}

.slide-frame.active { opacity: 1; z-index: 1; }

.black-logo { filter: invert(1) brightness(0.15); }

/* ===== Slider Nav on #section01 ===== */
#section01 .slider-nav{
	position:absolute;
	top:50%;
	right:5%;
	transform:translateY(-50%);
	display:flex;
	align-items:center;
	gap:10px;
	padding:10px 0px;
	backdrop-filter:saturate(120%) blur(2px);
	border-radius:14px;
	z-index:5;
	user-select:none;
}
#section01 .slider-nav .nav-arrow{
	display:flex;
	align-items:center;
	justify-content:center;
	width:42px;
	height:42px;
	border-radius:10px;
	color:#fff;
	cursor:pointer;
	transition:transform .15s ease, background .2s ease, opacity .2s ease;
}
#section01 .slider-nav .nav-arrow:hover{ background:rgba(255,255,255,.12); transform:scale(1.05); }
#section01 .slider-nav .nav-divider{
	width:1px; height:22px; background:rgba(255,255,255,.25);
}

/* 모바일 사이즈 조정 */
@media (max-width: 767px){
	#section01 .slider-nav{
		right:4%;
		gap:8px;
		padding:8px 10px;
		border-radius:12px;
	}
	#section01 .slider-nav .nav-arrow{ width:36px; height:36px; }
}




/* ===== Business Area (원문 유지) ===== */
#business_area {
	position: relative;
	width: 100%;
	padding-top:240px;
	padding-bottom:80px;
	background-color: #fff;
	text-align: center;
}
.business-area-header { max-width: 94%; margin: 0 auto; }
#business_area h1 { font-size: 54px; font-weight: 800; line-height: 1.3; margin-bottom: 60px; margin-top:0px; }
.point-red { color: #e24444; font-size: 60px; }
.business-area-desc { font-size: 22px; color: #222; line-height: 1.4; margin-bottom: 120px; }
.business-area-desc b { font-size: 26px; }
#business_area h2 {
    font-size: 48px;
    margin-bottom: 60px;
    max-width: 80%;
    margin: 0px auto 60px;
    text-align: center;
    font-family: 'BespokeSerif-ExtraBold';
}
.business-grid {
	display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2%;
    width: 90%;
    max-width: 1707px;
    margin: 0 auto;
}
.business-item { position: relative; width: 23%; overflow: hidden; cursor: pointer; }
.business-item img { width: 100%; display: block; transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); }
.business-item:hover img { transform: scale(1.05); }
.business-images { position: relative; }
.business-images h3 {
    position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%); width: 70%; color: #FFF;
    font-size: 36px; font-family: "Montserrat", sans-serif; font-weight: 900; padding: 10px 20px 10px 20px;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
	}
	
.business-images h3 span {
	display: inline-block;
	transition: transform 0.6s ease, opacity 0.6s ease;
}

.business-images .read_more {
	position: absolute;
	display: inline-block;
	transition: transform 0.6s ease, opacity 0.6s ease;
	top:83%;
	left:50%;
	transform:translate(-50%, -50%);
	font-size:16px;
	color:#fff;
}

.business-item:hover .business-images h3 span, .business-item:hover .business-images .read_more {
	animation: rotateOut 0.6s forwards;
}

/* 순차적 딜레이 (nth-child로 각 글자 시간차) */
.business-item:hover .business-images h3 span:nth-child(1) { animation-delay: 0s; }
.business-item:hover .business-images h3 span:nth-child(2) { animation-delay: 0.05s; }
.business-item:hover .business-images h3 span:nth-child(3) { animation-delay: 0.1s; }
.business-item:hover .business-images h3 span:nth-child(4) { animation-delay: 0.15s; }
.business-item:hover .business-images h3 span:nth-child(5) { animation-delay: 0.2s; }
/* 필요에 따라 계속 nth-child 추가 */

@keyframes rotateOut {
	0%   { transform: rotateY(0deg); opacity: 1; }
	100% { transform: rotateY(90deg); opacity: 0; }
}


.business-overlay {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 100%;
	/* 위쪽은 완전 투명, 아래로 갈수록 검정색 82% 불투명 */
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.82) 100%);
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	transition: top 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.business-item:hover .business-overlay { top: 0; }
.business-overlay h3 { font-size: 30px; font-weight: 100; margin-bottom: 12px; font-family: "Montserrat", sans-serif;font-weight:900;}
.business-overlay p { font-size: 24px; line-height: 1.5; }

/* ===== Clients (원문 유지, 변수만 적용) ===== */
#clients-section {
	position: relative;
	width: 100%;
	background: var(--c-muted);
	padding: 80px 0 0 0;
	margin-bottom:0px;
	box-sizing: border-box;
}
.clients-text-group { text-align: center; margin-top:120px; }
.clients-title { font-family: 'BespokeSerif-ExtraBold', serif; font-size: 48px; margin-bottom: 60px; }
.clients-desc { font-size: 22px; color: #222;line-height:1.4; margin-bottom:0px;}
.clients-desc b { font-size: 26px;}
.clients-logo-area {
	position: relative;
    width: 80%;
    max-width: 1517px;
    margin: 0 auto;
    padding: 60px 0px 100px 0px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}
.gradient-left, .gradient-right {
	position: absolute; top: 0; width: 80px; height: 100%;
	z-index: 2; pointer-events: none;
}
.gradient-left { left: 0; background: linear-gradient(to right, var(--c-muted) 70%, rgba(255,255,255,0)); }
.gradient-right { right: 0; background: linear-gradient(to left, var(--c-muted) 70%, rgba(255,255,255,0)); }
.logo-row {
	display: flex; gap: var(--row-gap); align-items: center;
	white-space: nowrap; width: max-content; margin: 0 auto; padding: 10px 0;
	animation-timing-function: linear;
}
.logo-row img {
	height: 38px; width: auto; object-fit: contain;
	filter: grayscale(100%); opacity: 0.95;
	transition: filter 0.2s, opacity 0.2s;
}
/* .logo-row img:hover { filter: grayscale(0%) drop-shadow(0 0 2px #0051ff33); opacity: 1; } */
.logo-row1 { animation: row-move-left var(--row-speed-1) linear infinite; }
.logo-row2 { animation: row-move-right var(--row-speed-2) linear infinite; }
.logo-row3 { animation: row-move-left var(--row-speed-3) linear infinite; }
@keyframes row-move-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes row-move-right { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }

.clients-bottom {
	background: url('../images/clients-bottom.png') no-repeat center center;
	background-size: cover; /* 화면에 꽉 차게 */
	color: #fff;
	padding: 100px 0 100px 0;
	text-align: center;
}

.clients-bottom-title { width: 50%; margin: 0 auto; max-width:800px;}
.clients-bottom-desc { font-size: 22px; line-height: 1.2; margin:60px 0px 0px 0px; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* 가로, 세로, 번짐, 색상 */ }
.clients-bottom-desc .b1 { font-size: 26px; }
.clients-bottom-desc .b2 { font-size: 40px; line-height:2.5; }

/* ===== Contact (원문 유지) ===== */
#contact-section {
	width: 100%;
	/* height: fit-content;  ← 제거 */
	/* max-height: 1005px;   ← 제거 */
	min-height: 100vh;       /* 화면 한 높이 이상 보장 */
	height: auto;            /* 콘텐츠만큼 늘어남 */
	background: #000;
	color:#fff;
	position: relative;
	/* 절대배치 요소·푸터 여유공간 */
	overflow: visible;
}
.contact-main-left {
	padding-top: 420px;
	padding-left: 13%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	z-index: 2;
}

.contact-title { font-family: 'BespokeSerif-ExtraBold', serif; font-size: 115px; margin: 0 0 18px 0; line-height: 1; }
.contact-desc { font-size: 24px; font-weight: 500; margin: 0; }

.circle-envelope-wrap {
	position: absolute;
	top: 490px;
	left: 80%;
	width: 480px;
	height: auto;
	transform: translate(-50%, -50%);
}

.circle-envelope-wrapm { position: relative; width: 210px; height: 210px; display: flex; align-items: center; justify-content: center; margin-bottom: 32px; }

.rotating-circle { width: 100%; height: 100%; animation: rotate360 8s linear infinite; filter: invert(1); transition: filter 0.2s; }
@keyframes rotate360 { 0% { transform: rotate(0deg);} 100% { transform: rotate(360deg);} }
.envelope-center {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 150px; height: 150px; display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.contact-info-area { padding-left: 13%; margin-top: 120px; text-align: left; z-index: 2;}
.contact-info-list {
	display: flex; align-items: center; gap: 18px;
	font-size: 29px; font-weight: 700; margin-bottom: 8px;
}
.contact-info-phone { display: flex; align-items: center; gap: 6px; }
.contact-info-divider { margin: 0 6px; color: #999; font-weight: 400; }
.contact-info-email { display: flex; align-items: center; gap: 6px; }
.contact-info-icon { width: 45px; height: 40px; display: inline-block; margin-bottom: -4px; }
.contact-info-phone-icon { width: 32px; height: 32px; margin-bottom: -6px; filter: invert(1); transition: filter 0.2s;}
.contact-info-addr { font-size: 24px; opacity: 0.85; margin-top: 2px; }
/* 푸터를 문서 흐름에 포함시킴 */
.contact-footer {
	width: 100%;
	text-align: center;
	font-size: 17px;
	margin: 120px 0 0 0;
	letter-spacing: 0.04em;
	/* position: absolute; ← 제거 */
	position: static;        /* 혹은 relative */
	z-index: 1;
}
/* ===== 메뉴 (원문 유지) ===== */
.menu-overlay {
	position: fixed; top: 0; left: 0; right: 0; bottom: 0;
	width: 100%; height: 100%; background: var(--c-menu);
	z-index: 3000; display: none; justify-content: center; align-items: center; flex-direction: column;
	transition: opacity 0.4s; opacity: 0;
}
.menu-overlay.active { display: flex; opacity: 1; pointer-events: all; }
.menu-close-btn { position: absolute; top: 38px; right: 48px; width: 48px; height: 48px; background: none; border: none; z-index: 10; cursor: pointer; }
.menu-close-btn span {
	position: absolute; top: 22px; left: 8px; width: 32px; height: 2.5px; background: #fff; border-radius: 3px; transition: all 0.25s;
}
.menu-close-btn span:first-child { transform: rotate(45deg); }
.menu-close-btn span:last-child { transform: rotate(-45deg); }
.menu-center-group { width: 100%; flex-direction: column; justify-content: center; align-items: center; }
.menu-nav { display: flex; flex-direction: column; align-items: center; margin-top:20px; margin-bottom: 54px; gap: 32px; }
.menu-link {
	position: relative; font-family: 'BespokeSerif-ExtraBold', serif; color: #fff; font-size: 45px;
	text-decoration: none; margin-bottom: 6px; transition: transform 0.2s cubic-bezier(.5,1.5,.6,.9), color 0.2s; cursor: pointer;
}
.menu-link::after {
	content: ''; position: absolute; left: 0; bottom: -8px; width: 0%; height: 2.5px; background: #fff; border-radius: 1.5px; transition: width 0.35s cubic-bezier(.8,0,.2,1);
}
.menu-link:hover::after, .menu-link.active::after { width: 100%; }
.menu-link:hover { transform: skew(-8deg, 0deg) scale(1.04); color: #F3E7D8; }
.menu-logo-area { display: flex; flex-direction: column; align-items: center; margin-top: 115px; }
.menu-logo-img { width: 80%; max-width: 1110px; display: block; }



@media (max-width: 1480px) {
	.circle-envelope-wrap {
		position: absolute;
		top: 480px;
		left: 80%;
		width: 300px;
		height: auto;
		transform: translate(-50%, -50%);
	}
}

/* ===== 반응형 (중복 중첩 제거, 원문 의미 유지) ===== */
@media (min-width: 1025px) {
	.main-subtext { font-size: 24px; }
	.one_more  { font-size: 28px; }
	.contact-button { font-size: 40px; padding: 15px 80px; }
}

@media (max-width: 1024px) {
	.contact-main-left, .contact-info-area { position: static; margin: 0 auto; text-align: center; align-items: center; padding-top:120px; }
	#contact-section {
		min-height:100vh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
	}
	.contact-title { font-size: 45px; }
	.business_area-container { width: 94%; padding: 0 3% 0 3%; }
	#business_area h1 { font-size: 30px; }
	#business_area h2 { font-size: 34px; }
	.business-area-desc { font-size: 16px; }
	.business-item { width: 48%; }
	.business-grid { gap: 18px; }
	#clients-section { padding: 50px 0 0 0; }
	.clients-logo-area { max-width: 90%; padding: 30px 0; }
	.logo-row { gap: 32px; }
	.main-logo { top: 30px; left: 3%; max-width: 14%; }
	.menu_icon { top: 25px; right: 5.5%; max-width: 20%; }
	.logo-row img { height: 30px; }
	.clients-title { font-size: 37px; }
	.clients-bottom-title { font-size: 29px; }
	.circle-envelope-wrap.pc { display:none !important;}
	.circle-envelope-wrapm.mobile { display:block !important;}
}

@media (max-width: 767px) {

	.pc {display:none !important;}
	.mobile {display:block !important;}
	.contact-main-left { padding-top: 120px; padding-left:0%;}
	.main-logo {top: 15px; left: 3%;  max-width: 25%;}
	.menu_icon { top: 15px; right: 3%; width: 10%; }
	.main-content { padding: 32% 4% 0% 4%; width: 92%; margin-top: 60%; }
	.main-subtext { font-size: 16px; line-height: 1.2; margin: 0 0 20px 0; }
	.contact-button { font-size: 14px; padding: 11px 24px; margin: 0px auto;}
	.main-title-image { width: 80%; margin-bottom:20px;}
	.main-title-image2 { width:90%; margin-bottom:20px;}
	.page-section { min-height: 100vh; }
	#business_area {padding-top:120px; }
	.business_area-container {	padding: 0% 3% 0% 3%; }
	#business_area h1 { font-size: 24px; margin-bottom:0px;}
	#business_area h2 { font-size: 22px; margin-bottom: 28px; }
	.business-area-desc { font-size: 16px; line-height:1.2; margin-bottom:60px;}
	.business-area-desc b { font-size: 18px;}
	
	.business-overlay h3 { font-size: 18px; line-height:1; }
	.business-overlay p { font-size:16px; }
	.business-images h3 { font-size: 18px; line-height:1;}
	.business-images .read_more {font-size:12px; }
	.point-red { font-size:28px; }
	.business-item { width: 48%; margin-bottom: 15px; }
	.business-grid { gap: 10px; }
	#clients-section { padding: 120px 0 0 0;}

	.clients-text-group, .clients-bottom { padding-left: 7%; padding-right: 7%; }
	.clients-logo-area { max-width: 100%; padding: 0; }
	.logo-row { gap: 16px; }
	.logo-row img { height: 18px; }
	.clients-title { font-size: 26px; margin-top:0px; margin-bottom:20px; }
	.clients-text-group {margin-bottom: 20px; margin-top:0px;}
	.clients-desc { font-size: 14px; }
	.clients-desc b { font-size: 16px;}
	.clients-bottom {margin-top:0px; padding: 60px 0 30px 0;}
	.clients-bottom-desc { font-size: 16px; margin-top:30px; }
	.clients-bottom-desc .b1 {font-size: 18px;}
	.clients-bottom-desc .b2 {font-size: 24px; line-height:1.2;}
	.clients-logo-area { margin: 0 auto 60px auto;}
	.logo-row {padding: 0px;}
	.gradient-left, .gradient-right { width: 12%; }
	#contact-section { min-height: fit-content; }
	.contact-title { font-size: 22px;  margin: 0 0 20px 0;}
	.contact-desc { font-size: 16px; margin:0 0 60px 0; }
	.circle-envelope-wrap { width: 300px; height: 300px; margin-bottom:0px;}
	.circle-envelope-wrapm { width: 65%; height: auto; margin-bottom: 0px;}
	.envelope-center { width: 200px; height: 200px; }
	.contact-info-area { padding-top:60px; padding-left: unset;}
	.contact-info-phone { font-size: 14px;  gap: 3px;}
	.contact-info-phone-icon { width: 24px; height: 24px; margin-bottom: -2px;}
	.contact-info-icon { width: 32px; height: 32px; display: inline-block; margin-bottom: 0px;}
	.contact-info-list { font-size: 14px; gap: 3px; display: inline-flex;}
	.contact-info-addr { font-size: 12px; }
    .contact-footer { position: unset; font-size: 13px; margin-top: 50px; margin-bottom:50px; }
	.menu-link { font-size:40px;}
	.menu-nav { gap: 10px; }
	.menu-logo-img { width: 70%; display: block; }
	.menu-logo-area { margin-top: 40px;}
	.top.with-gradient {
		background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.66) 50%, rgba(255, 255, 255, 0.33) 75%, rgba(255, 255, 255, 0) 100%);
		height: 15vh;
	}
	.top.black-gradient {
		background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.66) 50%, rgba(0, 0, 0, 0.33) 75%, rgba(0, 0, 0, 0) 100%);
		height: 15vh;
	}
	
	
}

@media (max-width: 500px) {
	.clients-bottom-title { width: 88%;}
}



@media (max-width: 500px) {
	#section01 .slider-nav { position: absolute; top: 30%;}
	.clients-title { margin-bottom:25px; }
	.clients-logo-area { margin: 50px auto 50px auto;}
    .clients-bottom-desc {
        font-size: 14px;
    }
    .clients-bottom-desc .b2 {
        font-weight:600;
    }
    .business-area-desc {
        font-size: 14px;
    }
	.business-area-desc b {
        font-size: 16px;
    }
    .contact-title {
        font-size: 25px;
    }
	.contact-desc {
        font-size: 14px;
        margin: 0 0 60px 0;
    }
}