/*
+----------------------------------------------------------------------+
| Copyright (c) 2010 - 2025 MAX AI @ WEAVERSBRAIN.Co.Ltd
+----------------------------------------------------------------------+
| 작업일 : 2025-07-15
| 파일설명 : 일본 맥스 AI 사이트 소개 페이지 CSS
+----------------------------------------------------------------------+
| 작업자 : 김주이 
+----------------------------------------------------------------------+
| 수정이력
| 
+----------------------------------------------------------------------+
*/

@charset "utf-8";

/* 공통 디자인 스타일 수정 2025-11-05 */
:root {
	--textdefault: rgba(85, 85, 85, 1);
	--fillpoint: rgba(131, 62, 207, 1);
	--filltonal: rgba(241, 222, 255, 1);
	--bgsecondary: rgba(255, 255, 255, 1);
	--strokedefault: rgba(231, 231, 231, 1);
	--bgprimary: rgba(245, 245, 245, 1);
	--textwhite: rgba(255, 255, 255, 1);
}

.highlight_black {
	color: #000000;
}
.highlight_white {
	color: #ffffff;
}
.highlight_purple {
	color: #833ecf;
}

/* 헤더 */
.headerWrap .headerInner {
	display: flex !important;
	justify-content: space-between;
	align-items: center;
	width: 1000px;
	margin: 0 auto;
	padding: 12px 0;
}
.headerWrap .headerLogo {
	width: 100px;
}

.headerWrap .headerLink {
	font-size: 16px;
	color: #000000;
	background-color: #d66cff;
	text-decoration: none;
	transition: 0.3s all;
	padding: 13px 24px;
	border-radius: 100px;
}
.headerWrap .headerLink:hover {
	opacity: 0.7;
}

.subNavWrap {
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 10;
	background: #000;
}
.subNavWrap .subNav {
	width: 1000px;
	margin: 0 auto;
}
.subNavWrap .subNav .navList {
	display: flex;
	justify-content: space-between;
}
.subNavWrap .subNav .navList .navBtn {
	display: inline-block;
	width: 25%;
	padding: 12px 0;
	border-bottom: 4px solid #ccc;
	font-size: 20px;
	font-family: "Pretendard";
	font-weight: 700;
	line-height: 160%;
	text-align: center;
	color: #fff;
	transition: 0.3s all;
	cursor: pointer;
}
.subNavWrap .subNav .navList .navBtn.on {
	position: relative;
	z-index: 1;
	color: transparent;
	background: linear-gradient(
		108.33deg,
		#e962ff -12.72%,
		#6aa5ff 133.8%,
		#4188f2 133.8%,
		#999999 133.8%,
		#e1ffaf 133.8%
	);
	background-clip: text;
	-webkit-background-clip: text;
	border-image: linear-gradient(
		108.33deg,
		#e962ff -12.72%,
		#6aa5ff 133.8%,
		#4188f2 133.8%,
		#999999 133.8%,
		#e1ffaf 133.8%
	);
	border-image-slice: 1;
}
.subNavWrap .subNav .navList .navBtn:hover {
	position: relative;
	z-index: 1;
	color: transparent;
	background: linear-gradient(
		108.33deg,
		#e962ff -12.72%,
		#6aa5ff 133.8%,
		#4188f2 133.8%,
		#999999 133.8%,
		#e1ffaf 133.8%
	);
	background-clip: text;
	-webkit-background-clip: text;
	border-image: linear-gradient(
		108.33deg,
		#e962ff -12.72%,
		#6aa5ff 133.8%,
		#4188f2 133.8%,
		#999999 133.8%,
		#e1ffaf 133.8%
	);
	border-image-slice: 1;
	opacity: 0.7;
}

.display_pc {
	display: block;
}
.display_mo {
	display: none;
}

@media screen and (max-width: 1000px) {
	/* 헤더 */
	.headerWrap .headerInner {
		width: 100%;
		padding: 12px 12px;
	}
	.headerWrap .headerLink {
		font-size: 12px;
	}

	.subNavWrap {
		overflow-x: auto;
		white-space: nowrap;
		background-color: #000;
	}
	.subNavWrap .subNav {
		width: 100%;
		margin: 0 auto;
	}
	.subNavWrap .subNav .navList {
		display: block;
		white-space: nowrap;
		overflow-x: auto;
		font-size: 0;
		box-sizing: border-box;
	}
	.subNavWrap .subNav .navList .navBtn {
		padding: 12px;
		color: #fff;
		font-size: 16px;
		width: auto;
	}

	.display_pc {
		display: none;
	}
	.display_mo {
		display: block;
	}
}