:root {
	--color-point: #0072FF;
	--color-point-gd: linear-gradient(90deg,rgba(0, 198, 255, 1) 0%, rgba(0, 114, 255, 1) 50%);
	--color-primary: #0D1137;
	--color-system: #FF3D3D;

	--color-gray-60: rgba(13, 17, 55, 0.6);
	--color-gray-40: rgba(13, 17, 55, 0.4);
	--color-gray-30: rgba(13, 17, 55, 0.3);
	--color-gray-20: rgba(13, 17, 55, 0.2);
	--color-gray-10: rgba(13, 17, 55, 0.1);
	--color-white-100: rgba(255, 255, 255, 1);
	--color-white-80: rgba(255, 255, 255, 0.8);
	--color-white-40: rgba(255, 255, 255, 0.4);
	--color-white-30: rgba(255, 255, 255, 0.3);
	--color-white-10: rgba(255, 255, 255, 0.1);
}

@font-face {
	font-family: 'Pretendard';
	src: url('/fonts/pretendard/Pretendard-Thin.otf') format("opentype");
	font-style: normal;
	font-weight: 100;
}

@font-face {
	font-family: 'Pretendard';
	src: url('/fonts/pretendard/Pretendard-SemiBold.otf') format("opentype");
	font-style: normal;
	font-weight: 200;
}

@font-face {
	font-family: 'Pretendard';
	src: url('/fonts/pretendard/Pretendard-Regular.otf') format("opentype");
	font-style: normal;
	font-weight: 300;
}

@font-face {
	font-family: 'Pretendard';
	src: url('/fonts/pretendard/Pretendard-Medium.otf') format("opentype");
	font-style: normal;
	font-weight: 400;
}

@font-face {
	font-family: 'Pretendard';
	src: url('/fonts/pretendard/Pretendard-Light.otf') format("opentype");
	font-style: normal;
	font-weight: 500;
}

@font-face {
	font-family: 'Pretendard';
	src: url('/fonts/pretendard/Pretendard-ExtraLight.otf') format("opentype");
	font-style: normal;
	font-weight: 600;
}

@font-face {
	font-family: 'Pretendard';
	src: url('/fonts/pretendard/Pretendard-ExtraBold.otf') format("opentype");
	font-style: normal;
	font-weight: 700;
}

@font-face {
	font-family: 'Pretendard';
	src: url('/fonts/pretendard/Pretendard-Bold.otf') format("opentype");
	font-style: normal;
	font-weight: 800;
}

@font-face {
	font-family: 'Pretendard';
	src: url('/fonts/pretendard/Pretendard-Black.otf') format("opentype");
	font-style: normal;
	font-weight: 900;
}

html {
	width: 100%;
	height: 100%;
	font-family: 'Pretendard';
	font-size: 10px;
	font-weight: 300;
	color: var(--color-primary);
}

body {
	font-size: 1.6rem;
}

/* 텍스트 색상 */
.text-point { color: var(--color-point); }
.text-primary { color: var(--color-primary); }
.text-system { color: var(--color-system); }
.text-gray-60 { color: var(--color-gray-60); }
.text-gray-40 { color: var(--color-gray-40); }
.text-gray-30 { color: var(--color-gray-30); }
.text-gray-20 { color: var(--color-gray-20); }
.text-gray-10 { color: var(--color-gray-10); }
.text-white-100 { color: var(--color-white-100); }
.text-white-80 { color: var(--color-white-80); }
.text-white-40 { color: var(--color-white-40); }
.text-white-30 { color: var(--color-white-30); }
.text-white-10 { color: var(--color-white-10); }

/* 배경 색상 */
.bg-point { background-color: var(--color-point); }
.bg-point-gd { background-color: var(--color-point-gd); }
.bg-primary { background-color: var(--color-primary); }
.bg-system { background-color: var(--color-system); }
.bg-gray-60 { background-color: var(--color-gray-60); }
.bg-gray-40 { background-color: var(--color-gray-40); }
.bg-gray-30 { background-color: var(--color-gray-30); }
.bg-gray-20 { background-color: var(--color-gray-20); }
.bg-gray-10 { background-color: var(--color-gray-10); }
.bg-white-100 { background-color: var(--color-white-100); }
.bg-white-40 { background-color: var(--color-white-40); }
.bg-white-30 { background-color: var(--color-white-30); }
.bg-white-10 { background-color: var(--color-white-10); }

/* 텍스트 사이즈 */
.fs-1 { font-size: 1.4rem; }
.fs-2 { font-size: 1.6rem; }
.fs-3 { font-size: 1.8rem; }
.fs-4 { font-size: 2rem; }
.fs-5 { font-size: 3.2rem; }
.fs-6 { font-size: 4.8rem; }
.fs-7 { font-size: 6rem; }
.fs-8 { font-size: 10rem; }

/* 텍스트 두께 */
.fw-semibold { font-weight: 200; }
.fw-regular { font-weight: 300; }

/* 텍스트 행간 */
.lh-1 { line-height: 1.4rem; }
.lh-2 { line-height: 1.6rem; }
.lh-3 { line-height: 1.8rem; }
.lh-4 { line-height: 2rem; }
.lh-5 { line-height: 2.2rem; }
.lh-6 { line-height: 3rem; }
.lh-7 { line-height: 4.4rem; }
.lh-8 { line-height: 4.8rem; }
.lh-9 { line-height: 6rem; }
.lh-10 { line-height: 12.8rem; }

/* 텍스트 자간 */
.ls-1 { letter-spacing: -1.5%; }

/* 버튼 */
.btn {
	padding: 16px 32px;
	border-radius: 24px;
	font-weight: 200;
	line-height: 1.6rem;
}

.btn-more {
	color: var(--color-primary);
	boarder: 1px solid var(--color-primary);
	padding: 16px 80px;
}

.btn-link {
	color: var(--color-primary);
	border: 1px solid var(--color-primary);
	padding-right: 59px;
	background: url('../../images/egovframework/icon/sub-arrow-r-b.png') no-repeat 100px center;
  	background-size: 20px 8px;
}

.btn-link-bg {
	background-color: var(--color-primary);
	color: var(--color-white-100);
	padding-right: 59px;
	background: url('../../images/egovframework/icon/sub-arrow-r-w.png') no-repeat 68px center var(--color-primary);
	background-size: 20px 8px;
}

.btn-download {
	border: 1px solid rgba(13, 17, 55, 0.2);
	color: var(--color-primary);
	padding-left: 52px;
	background: url('../../images/egovframework/icon/download-dark.png') no-repeat 32px center;
  	background-size: 12px 12px;
}

.btn-experience {
	border: 1px solid rgba(13, 17, 55, 0.2);
	color: var(--color-primary);
}

.btn-click {
	border: 1px solid rgba(13, 17, 55, 0.2);
	color: rgba(13, 17, 55, 0.6);
	font-size: 1.8rem;
	line-height: 1.8rem;
	padding: 12px 24px;
}

.btn-click.active {
	border: 1px solid var(--color-primary);
	color: var(--color-primary);
}

/* 공통 버튼 */
#common-button {
	position: fixed;
	bottom: 24px;
	right: 80px;
	z-index: 10;
}

#common-button ul {
	display: flex;
	flex-direction: column;
    gap: 18px;
}

#common-button ul li {
	width: 64px;
	height: 64px;
	background-color: red;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.16);
	position: relative;
	
	/* text-indent: -9999px; */
}

#common-button ul li:nth-child(1) {
	background: url('../../images/egovframework/icon/top01.png') no-repeat center center, linear-gradient(90deg, rgba(0, 198, 255, 1) 0%, rgba(0, 114, 255, 1) 50%);
	background-repeat: no-repeat, no-repeat;
	background-size: 22px 22px, cover;
}

#common-button ul li:nth-child(2) {
	background: url('../../images/egovframework/icon/top02.png') no-repeat center center rgba(13, 17, 55, 0.6);
	background-size: 24px 24px;
}

#common-button ul li:nth-child(3) {
	background: url('../../images/egovframework/icon/top03.png') no-repeat center center var(--color-white-100);
	background-size: 12px 20.5px;
}

#common-button ul li:nth-child(1):hover::after {
	border: 1px solid rgba(13, 17, 55, 0.4);
	position: absolute;
	top: 50%;
	right: 70px;
	content: '문의하기';
	color: #000;
	transform: translateY(-50%);
	width: 100%;
	padding: 10px;
	text-align: center;
	border-radius: 15px;
}

#common-button ul li:nth-child(2):hover::after {
	border: 1px solid rgba(13, 17, 55, 0.4);
	position: absolute;
	top: 50%;
	right: 70px;
	content: '회사소개서';
	color: #000;
	transform: translateY(-50%);
	width: 120%;
	padding: 10px;
	text-align: center;
	border-radius: 15px;
}

#common-button ul li a {
	display: block;
	width: 100%;
	height: 100%;
}

#common-button ul li .top {
	width: 100%;
	height: 100%;
}

/* 헤더 */
#header {
	position: fixed;
	top: 0;
	left: 0;
  	width: 100%;
	z-index: 120;
}

#header .top {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding: 28px 80px;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid var(--color-white-30);
	z-index: 10000;
}

#header .top .logo {
	width: 135px;
}

#header .top .logo img {
	width: 100%;
}

#header .top .nav ul {
	display: flex;
	flex-direction: row;
	gap: 10px;
}

#header .top .nav ul li a {
	display: block;
	padding: 10px 24px;
	border-radius: 32px;
	font-weight: 200;
	color: var(--color-white-100);
	position: relative;
	z-index: 1;
	overflow: hidden;
}

#header .top .nav ul li a:hover {
	color: var(--color-white-100) !important;
}

#header .top .nav ul li a::before {
	content: "";
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	border-radius: 32px;
	background: linear-gradient(90deg, rgba(0, 198, 255, 1) 0%, rgba(0, 114, 255, 1) 50%);
	opacity: 0;
	transition: opacity 0.3s;
	z-index: -1;
}

#header .top .nav ul li a:hover::before,
#header .top .nav ul li a.active::before {
	opacity: 1;
}

#header .top .menu-btn {
  background: none;
  border: none;
  width: 40px;
  height: 40px;
  cursor: pointer;
  position: relative;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
}

#header .top .menu-btn .menu-icon {
	width: 26px;
	height: 26px;
	background: url('../../images/egovframework/icon/menu.png') no-repeat center center;
	background-size: 26px 26px;
	text-indent: -9999px;
	cursor: pointer;
}

/* 헤더 - 메뉴 */
#header .menu-layer {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(13, 17, 55, 0.82);
	backdrop-filter: blur(80px);
	-webkit-backdrop-filter: blur(80px);
	color: var(--color-white-100);
	transition: opacity 0.3s;
	z-index: 2000;
}

#header .menu-layer.active {
	display: block;
}

#header .menu-layer .main-wrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	gap: 52px;
}

#header .menu-layer .main-wrapper .menu-layer-nav ul {
	display: flex;
	flex-direction: column;
	gap: 44px;
}

#header .menu-layer .main-wrapper .menu-layer-nav ul li a {
	color: var(--color-white-100);
	line-height: 3.2rem;
}

#header .menu-layer .main-wrapper .info-wrap {
	flex-direction: column;
	max-width: 805px;
	width: 100%;
	gap: 16px;
}

#header .menu-layer .main-wrapper .info-wrap .contact-info,
#header .menu-layer .main-wrapper .info-wrap .request-info {
	width: 100%;
	box-sizing: border-box;
}

#header .menu-layer .main-wrapper  .info-wrap .contact-info,
#header .menu-layer .main-wrapper  .info-wrap .request-info .company-profile {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* 회사 정보 */
.info-wrap {
	display: flex;
	gap: 28px;
}

.info-wrap .contact-info,
.info-wrap .request-info .request,
.info-wrap .request-info .company-profile {
	border: 1px solid var(--color-white-30);
	border-radius: 8px;
	background: rgba(13, 17, 55, 0.2);
	backdrop-filter: blur(50px);
	-webkit-backdrop-filter: blur(50px);
	transition: all 0.3s;
}

.info-wrap .request-info .request:hover,
.info-wrap .request-info .company-profile:hover {
	border: 1px solid var(--color-point);
}

.info-wrap .contact-info,
.info-wrap .request-info {
	width: 50%;
}

.info-wrap .contact-info {
	position: relative;
	padding: 48px 48px 70px 48px;
}

/* .info-wrap .contact-info ul {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
} */

.info-wrap .contact-info li {
	margin-bottom: 28px;
}

.info-wrap .contact-info li:last-child {
	margin-bottom: 0;
}

.info-wrap .contact-info li .title {
	margin-bottom: 14px;
}

.info-wrap .request-info {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.info-wrap .request-info .request {
	padding: 48px 48px 56px 48px;
}

.info-wrap .request-info .request .title {
	margin-bottom: 8px;
}

.info-wrap .request-info .request .title::before {
	display: block;
	content: '';
	width: 46px;
	height: 46px;
	background: url("../../images/egovframework/icon/call.png") no-repeat center center;
	margin-bottom: 22px;
}

.info-wrap .request-info .request .title::after {
	position: absolute;
	content: '';
	top: 48px;
	right: 48px;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: url("../../images/egovframework/icon/arrow-r.png") no-repeat center center;
	background-color: var(--color-white-10);
	transition: all 0.3s;
}

.info-wrap .request-info .request:hover .title::after {
	background-color: rgba(255, 255, 255, 0.5);
}

.info-wrap .request-info .company-profile {
	padding: 24px;
	text-align: center;
}

.info-wrap .request-info .company-profile .title {
	padding-left: 18px;
	background: url("../../images/egovframework/icon/download.png") no-repeat left center;
}

/* 헤더 - dark/sub */
#header.sub {
	position: unset;
}

#header.dark .top,
#header.sub .top {
	border-bottom: 1px solid rgba(13, 17, 55, 0.2);
}

#header.dark .top .nav ul li a,
#header.sub .top .nav ul li a {
	color: var(--color-primary);
}

#header.sub .top .nav ul li a:hover,
#header.sub .top .nav ul li a.active {
	color: var(--color-white-100);
}

#header.dark .top .menu-btn .menu-icon,
#header.sub .top .menu-btn .menu-icon {
	background-image: url('../../images/egovframework/icon/menu-dark.png');
	background-repeat: no-repeat;
	background-position: center center;
}

/* 메인, 메뉴 wrapper */
.main-wrapper {
	max-width: 1464px;
	padding: 0 32px;
	width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
}

/* 서브 wrapper */
.sub-wrapper {
	max-width: 1264px;
	padding: 140px 32px;
	width: 100%;
  	margin: 0 auto;
  	box-sizing: border-box;
  	min-height: 1200px;
}

.sub-wrapper h1 {
	margin-bottom: 44px;
}

/* fullpage */
#fullpage {
	visibility: hidden;
}

/* footer */
#footer {
	display: flex;
    padding: 72px 0 100px;
	justify-content: space-between;
}

#footer .gray-logo {
	width: 329px;
}

#footer .gray-logo img {
	width: 100%;
}

#footer .company-info {
	display: flex;
	flex-direction: column;
	align-items: end;
	gap: 12px;
	line-height: 2.2rem;
	color: rgba(13, 17, 55, 0.6);
}

#footer .company-info ul {
	display: flex;
	gap: 20px;
	margin-top: 12px;
}

#footer .company-info ul li strong {
	font-weight: 200;
}

#footer .company-info .capyright {
	font-size: 1.4rem;
	line-height: 2.2rem;
}

#footer.footer-sub {
	width: 100%;
	border-top: 1px solid rgba(13, 17, 55, 0.2);
}

#footer.footer-sub .footer-sub-wrapper {
	max-width: 1464px;
	width: 100%;
	margin: 0 auto;
	padding-left: 32px;
	padding-right: 32px;
	box-sizing: border-box;
	display: flex;
    justify-content: space-between;
}

/* 반응형 */
@media (max-width: 1900px) {
	#common-button {
		right: 32px;
	}
	
	#header .top {
		padding-left: 32px;
		padding-right: 32px;
	}
}

@media (max-width: 1200px) {
	#footer {
		padding: 32px 0 46px;
		flex-direction: column;
        align-items: flex-start;
        gap: 24px;
	}
	
	#footer.footer-sub .footer-sub-wrapper {
		flex-direction: column;
		align-items: flex-start;
        gap: 24px;
	}
	
	#footer .gray-logo {
		width: 170px;
	}
	
	#footer .company-info {
		align-items: flex-start;
		gap: 26px;
	}
	
	#footer .company-info ul {
		margin-top: 0;
		flex-direction: column;
        gap: 8px;
	}
}

@media (max-width: 1024px) {
	#header .top .nav {
		display: none;
	}
	
	#header .menu-layer {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(13, 17, 55, 0.97);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
	}
	
	#common-button ul li:nth-child(1)::after,
	#common-button ul li:nth-child(2)::after {
		display: none;
	}
}

@media (max-width: 768px) {
	.fs-6 { font-size: 3.2rem; }
	.fs-8 { font-size: 4.4rem; }
	
	.lh-8 { line-height: 4.4rem; }
	.lh-10 { line-height: 5.8rem; }
	
	.btn {
		padding: 12px 24px;
		font-size: 1.4rem;
		line-height: 1.4rem;
	}
	
	.btn-more {
		padding: 16px 80px;
	}
	
	.btn-link {
		padding-right: 51px;
		background-position: 83px center;
	}
	
	.btn-link-bg {
		padding-right: 51px;
		background-position: 56px center;
	}
	
	.btn-click {
		font-size: 1.6rem;
		line-height: 1.6rem;
		padding: 10px 20px;
	}
	
	.btn-download {
		padding-left: 44px;
		background-position: 24px center;
	}
	
	#common-button {
		right: 20px;
	}
	
	#common-button ul {
		gap: 10px;
	}
	
	#common-button ul li {
		width: 40px;
		height: 40px;
	}
	
	#common-button ul li:nth-child(1) {
		background-size: 18px 18px, cover;
	}
	
	#common-button ul li:nth-child(2) {
		background-size: 18px 18px, cover;
	}
	
	#common-button ul li:nth-child(3) {
		background-size: 12px 18px, cover;
	}
	
	#header .top {
		padding: 20px;
	}
	
	#header .top .logo {
		width: 100px;
	}
	
	#header .menu-layer .main-wrapper {
		flex-direction: column;
		top: 96px;
		transform: translateX(-50%);	
	}
	
	#header .menu-layer .main-wrapper .menu-layer-nav {
		width: 100%;
	}
	
	#header .menu-layer .main-wrapper .menu-layer-nav ul {
		gap: 24px;
		font-size: 1.8rem;
		line-height: 1.8rem;
	}
	
	.info-wrap {
		flex-direction: column;
		gap: 18px;
	}
	
	.info-wrap .contact-info,
	.info-wrap .request-info {
		width: 100%;
		box-sizing: border-box;
	}
	
	.info-wrap .contact-info {
		padding: 32px 24px 40px;
	}
	
	/* .info-wrap .contact-info ul {
		position: unset;
		transform: none;
	} */
	
	.info-wrap .contact-info li {
		margin-bottom: 24px;
	}
	
	.info-wrap .contact-info li p {
		font-size: 1.6rem;
	}
	
	.info-wrap .contact-info li .title {
		font-size: 1.4rem;
		line-height: 1.4rem;
		margin-bottom: 10px;
	}
	
	.info-wrap .request-info {
		gap: 18px;
	}
	
	.info-wrap .request-info .request {
		padding: 24px 24px 36px;
	}
	
	.info-wrap .request-info .request p {
		font-size: 1.4rem;
		line-height: 2rem;
	}
	
	.info-wrap .request-info .request .title {
		font-size: 1.8rem;
		line-height: 1.8rem;
	}
	
	.info-wrap .request-info .request .title::before {
		width: 34px;
		height: 34px;
		margin-bottom: 16px;
		background-size: contain;
	}
	
	.info-wrap .request-info .request .title::after {
		width: 44px;
		height: 44px;
		top: 24px;
		right: 24px;
	}
	
	.info-wrap .request-info .company-profile {
		padding: 18px;
	}
	
	.main-wrapper {
		padding: 0 20px;
	}
	
	.sub-wrapper {
		padding: 120px 20px 80px;
	}
	
	.sub-wrapper h1 {
		font-size: 3.2rem;
		line-height: 4.4rem;
		margin-bottom: 24px;
	}
	
	/* #footer.footer-sub {
		padding-left: 20px;
		padding-right: 20px;
	} */
	
	#footer.footer-sub .footer-sub-wrapper {
		padding-left: 20px;
		padding-right: 20px;
	}
}