@charset "utf-8";

/* FONT Import */
@import url('https://fonts.cdnfonts.com/css/itc-avant-garde-pro-md'); /* LOGO Font ITC Avant Garde Pro Md Font Family : font-family: 'ITC Avant Garde Pro Md', sans-serif; */
@import url('https://cdn.jsdelivr.net/gh/fonts-archive/Freesentation/Freesentation.css'); /* Base Font Freesentation : font-family: 'Freesentation'; */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"); /* Sub Font Pretendard : font-family: 'Pretendard'; */
@import url('https://fonts.cdnfonts.com/css/metropolis-2'); /* Metropolis : font-family: 'Metropolis', sans-serif; */
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap'); /* Roboto : font-family: 'Roboto', sans-serif; */
@import url('https://cdn.jsdelivr.net/gh/aquawolf04/font-awesome-pro@5cd1511/css/all.css'); /* Font Awesome */

/* 초기화 */
html, body {
	width:100%;
	height:100vh;
	font-family: 'Freesentation', 'Pretendard', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
	margin:0;
	padding:0;
}
html { overflow-y:scroll; }
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em;font-family: 'Freesentation', 'Pretendard', sans-serif;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, header, section {display:block}

ul, dl,dt,dd {margin:0;padding:0;list-style:none}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle;}
input, button {margin:0;padding:0;font-size:1em;font-family: 'Freesentation', 'Pretendard', sans-serif;}
input[type="submit"]{cursor:pointer}
button {outline:0;cursor:pointer}

select {margin:0}
p {font-family: 'Freesentation', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;margin:0;padding:0;word-break:break-all}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a {color:#000;text-decoration:none;outline:0}

*, ::focus {
	outline:0;
}
*, ::after, ::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

* input[type=text],input[type=password], textarea {
	-webkit-transition: all 0.30s ease-in-out;
	-moz-transition: all 0.30s ease-in-out;
	-ms-transition: all 0.30s ease-in-out;
	-o-transition: all 0.30s ease-in-out;
	outline: none;
}
 
*  input[type=text]:focus,input[type=password]:focus,  textarea:focus,select:focus {
	-webkit-box-shadow:  0 0 5px #9ed4ff;
	-moz-box-shadow:  0 0 5px #9ed4ff;
	box-shadow: 0 0 5px #9ed4ff;
	border: 1px solid #558ab7 !important;
}

::selection {
	color:#000;
	background-color:#b3d4fc;
	text-shadow:none;
}
::-moz-selection {
	color:#000;
	background-color:#b3d4fc;
	text-shadow:none;
}
::-webkit-selection {
	color:#000;
	background-color:#b3d4fc;
	text-shadow:none;
}

.placeholdersjs { color: #ddd !important; }

svg { overflow:hidden; vertical-align:middle; }

table {
	border-collapse: collapse;
	border-spacing: 0;
}
input { background:#fafafa; }
textarea {
	width:100%;
	height:200px;
	font-size:14px;
	color:#333;
	line-height:1.5em;
	padding:10px !important;
	background:#fafafa;
	border:1px solid rgba(0,0,0,0.2);
	border-radius:3px;
	box-shadow:none;
	resize:none;
	outline:none;
}
input:focus,
textarea:focus { background-color:#fff; outline:none; }

select {
	height:40px;
	font-family: 'Freesentation', 'Pretendard', sans-serif;
	font-size:1rem;
	color:#212121;
	font-weight:400;
	line-height:40px;
	padding:0 40px 0 10px;
	background-color:#fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 380'%3E%3Cpath fill='%23212121' d='M256,246.5c-8.2,0-16.1-3.3-21.9-9.1L152,155.4l21.9-21.9l82.1,82.1l82.1-82.1l21.9,21.9l-82.1,82.1 C272.1,243.3,264.2,246.6,256,246.5z'/%3E%3Crect fill='%23d0d0d0' x='0' y='70' width='20' height='240'/%3E%3C/svg%3E%0A");
	background-size:30px;
	background-position:100% 50%;
	background-repeat:no-repeat;
    border:1px solid #ddd;
	border-radius:3px;
	outline:none;
    -webkit-appearance:none;
	-moz-appearance:none;    
	appearance:none;
	cursor:pointer;
}
select::-ms-expand {
	display: none;
}

input[type="checkbox"] {
	display:none;
}
input[type="checkbox"] + label {
	font-size:1rem;
	color:#333;
	white-space:nowrap;
	padding-right:25px !important;
	padding:0;
	cursor:pointer;
	display:inline-block;
}
input[type="checkbox"] + label span {
	width:20px;
	min-width:20px;
	height:20px;
	margin-right:0.35rem;
	vertical-align:middle;
	background-color:#fff;
	background-image:none;
	background-size:auto 26px;
	background-position:50% 50%;
	background-repeat:no-repeat;
	border:1px solid #ccc;
	border-radius:0.25rem;
	cursor:pointer;
	vertical-align:middle;
	display:inline-block;
}
input[type="checkbox"]:checked + label span {
	background-color:#000;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFF' d='M10.5859 13.4142L7.75748 10.5858L6.34326 12L10.5859 16.2426L17.657 9.17154L16.2428 7.75732L10.5859 13.4142Z'/%3E%3C/svg%3E%0A");
	border-color:#000;
}
input[type="checkbox"]:disabled + label,
input[type="checkbox"]:disabled + label span { cursor:default; }

input[type="radio"] {
	display:none;
}
input[type="radio"] + label {
	font-size:1rem;
	color:#333;
	padding-right:25px;
}
input[type="radio"] + label span {
	width:20px;
	height:20px;
	margin:-2px 5px 0 0;
	vertical-align:middle;
	background-color:#fff;
	background-size:auto 12px;
	background-position:50% 50%;
	background-repeat:no-repeat;
	border:1px solid #ccc;
	border-radius:50%;
	cursor:pointer;
	display:inline-block;
}
input[type="radio"]:checked + label span {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%2353585e'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/g%3E%3C/svg%3E");
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
	font-family: 'Freesentation', 'Pretendard', sans-serif;
	color:#aaa !important;
}
::-moz-placeholder { /* Firefox 19+ */
	font-family: 'Freesentation', 'Pretendard', sans-serif;
	color:#aaa !important;
}
:-ms-input-placeholder { /* IE 10+ */
	font-family: 'Freesentation', 'Pretendard', sans-serif;
	color:#aaa !important;
}
:-moz-placeholder { /* Firefox 18- */
	font-family: 'Freesentation', 'Pretendard', sans-serif;
	color:#aaa !important;
}

/* Scroll Width */
::-webkit-scrollbar {
	width:6px;
	height:6px;
	background-color:transparent;
}
/* Scroll Track */
::-webkit-scrollbar-track {
	border-radius:0;
}
/* Scroll Handle */
::-webkit-scrollbar-thumb {
	background-color:rgba(0,0,0,0.5);
	border:1px solid rgba(255,255,255,0.3);
	border-radius:10px;
}
/* Scroll Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background-color:rgba(0,0,0,1);
}

/* iFrame Container */
#loadFrame {
	width:100%;
	min-width:320px;
	height:100%;
	margin:0;
	padding:0;
	background-color:#fff;
	border:0;
}

/* Contents */
#wrap {
	width:100%;
	height:100vh;
	margin:0 auto;
	padding:0 3rem;
	opacity:0;
	display:flex;
	flex-direction:column;
}
#wrap.on { opacity:1; }

/* Loader */
#loader {
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	display:flex;
	align-items:center;
	justify-content:center;
	z-index:9;
}
#loader span {
	width:1rem;
	height:1rem;
	margin:0 0.15rem;
	background-color:#1b1b1b;
	border-radius:100%;
	animation:bounce 1.4s infinite ease-in-out both;
}  
#loader span:nth-of-type(1) { animation-delay: -0.32s;  }
#loader span:nth-of-type(2) { animation-delay: -0.16s; }
@keyframes bounce {
	0%,
	80%,
	100% {
		transform:scale(0);
	}
	40% {
		transform:scale(1.0);
	}
}

#header {
	position:relative;
	padding:2rem 0 0 0;
	display:flex;
	flex-direction:column;
	align-items:center;
}
#header:after {
	content:"";
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	border-bottom:1px solid rgba(0,0,0,0.05);
}
#header .logo {
	position:relative;
	width:8vw;
	min-width:145px;
	background-image:url('../img/logo.svg');
	background-size:auto 100%;
	background-position:0 50%;
	background-repeat:no-repeat;
	display:block;
}
#header .logo:after {
	content:'';
	padding-bottom:20%;
	display:block;
}
#header .gnb {
	margin:3rem 0 1rem 0;
	display:flex;
	align-items:center;
	justify-content:center;
}
#header .gnb a {
	position:relative;
	width:160px;
	font-family: 'Metropolis', sans-serif;
	font-size:1rem;
	color:#919191;
	font-weight:500;
	text-align:center;
}
#header .gnb a:before {
	content:"";
	position:absolute;
	top:-1rem;
	left:50%;
	width:6px;
	height:6px;
	background-color:#000;
	border-radius:50%;
	transition:all 1s ease-in-out;
	opacity:0;
}
#header .gnb a.current { color:#000; }
#wrap.on #header .gnb a.current:before {
	opacity:1;
}

/* Footer */
#footer {
	margin-top:auto;
	padding:3rem 0 1.5rem 0;
	text-align:center;
}
#footer .copyright {
	font-size:0.8rem;
	color:#616161;
	font-weight:400;
	display:block;
}

/*
+-----------------------------------------------------------------+
+           Desktop Device greater than 1201px          +
+-----------------------------------------------------------------+
*/
@media all and (min-width:1201px) {
	#header .mNav,
	#mMenu { display:none; }
}

/*
+--------------------------------------------------------------------------------------+
+           Tablet Device Less than 1200px or greater than 769px          +
+--------------------------------------------------------------------------------------+
*/
@media all and (min-width:769px) and (max-width:1200px) {
	#header .mNav,
	#mMenu { display:none; }
}

/*
+----------------------------------------------------------+
+           Mobile Device Less than 768px          +
+----------------------------------------------------------+
*/
@media all and (max-width:768px) {
	#wrap { padding:0 1rem !important; }
	#header {
		position:fixed !important;
		top:0 !important;
		left:0 !important;
		right:0 !important;
		padding:1.5rem 1rem !important;
		background-color:rgba(255,255,255,0.8);
		flex-direction:row !important;
		z-index:9;
	}
	#header:before {
		content:"";
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		background-color:rgba(255,255,255,0.9);
		-webkit-backdrop-filter:blur(10px);
		backdrop-filter:blur(10px);
		z-index:-1;
	}
	#header .logo {
		min-width:120px;
	}
	#header .gnb { display:none; }

	#header .mNav {
		position:absolute;
		top:50%;
		right:1rem;
		width:40px;
		min-width:40px;
		height:40px;
		min-height:40px;
		margin-left:auto;
		transform:translateY(-50%);
		cursor:pointer;
	}
	#header .mNav i {
		position:absolute;
		top:50%;
		left:50%;
		width:30px;
		height:26px;
		transform:translate(-50%, -50%);
		transition:background-color 0.25s ease-in-out;
		display:block;
	}
	#header .mNav i:before {
		content:'';
		position:absolute;
		top:0;
		left:0;
		right:0;
		height:2px;
		background-color:#000;
		transition:transform 0.25s;
		display:block;
	}
	#header .mNav i:after {
		content:'';
		position:absolute;
		bottom:0;
		left:0;
		right:0;
		height:2px;
		background-color:#000;
		transition:all 0.25s;
		display:block;
	}
	#header .mNav i > span {
		position:absolute;
		top:50%;
		right:0;
		width:100%;
		height:2px;
		background-color:#000;
		transform:translateY(-50%);
		transition:all 0.25s ease-in-out;
		display:block;
	}
	#header .mNav[data-state=true] i:before {
		top:12px;
		left:0;
		right:0;
		transform:rotate(-45deg);
	}
	#header .mNav[data-state=true] i:after {
		top:12px;
		left:0;
		right:0;
		transform:rotate(45deg);
	}
	#header .mNav[data-state=true] i > span { width:0; }

	#mMenu {
		position:fixed;
		top:72px;
		left:0;
		width:100%;
		height:calc(100% - 72px);
		padding:2rem 1.5rem 1.5rem 1.5rem;
		transition:all 0.3s cubic-bezier(1, 0, 0, 1);
		overflow:auto;
		visibility:hidden;
		opacity:0;
		display:flex;
		flex-direction:column;
		z-index:1;
	}
	#mMenu:before {
		content:"";
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		background-color:rgba(255,255,255,0.9);
		-webkit-backdrop-filter:blur(5px);
		backdrop-filter:blur(5px);
		z-index:-1;
	}
	#mMenu.on {
		visibility:visible;
		opacity:1;
		transition:all 0.3s ease-in;
	}
	#mMenu .mGnb {
		display:flex;
		flex-direction:column;
	}
	#mMenu .mGnb li {
		position:relative;
		margin:1rem 0;
		display:flex;
		align-items:center;
	}
	#mMenu .mGnb li:before {
		content:"";
		position:absolute;
		top:50%;
		left:0;
		width:6px;
		height:6px;
		background-color:#000;
		border-radius:50%;
		transform:translateY(-50%);
		transition:all 1s ease-in-out;
		opacity:0;
	}
	#mMenu .mGnb li.active:before { opacity:1; }
	#mMenu .mGnb a {
		font-family: 'Metropolis', sans-serif;
		font-size:1rem;
		color:#919191;
		font-weight:700;
		transition:all 0.5s ease-in-out;
	}
	#mMenu .mGnb li.active a {
		color:#000;
		margin-left:1rem;
	}
	#mMenu .copyright {
		font-size:0.8rem;
		color:#616161;
		font-weight:400;
		margin-top:auto;
		text-align:center;
		display:block;
	}
}