@charset "utf-8";

/* FONT Import */
@import url("fonts/Paperlogy.css"); /* font-family: "Paperlogy"; */
@import url("fonts/Pretendard.css"); /* font-family: "Pretendard" */
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap'); /* font-family: "Roboto" */

/* 초기화 */
html, body {
	width:100%;
	height:100%;
	font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
	margin:0;
	padding:0;
}
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: '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: 'Pretendard', sans-serif;}
input[type="submit"]{cursor:pointer}
button {outline:0;cursor:pointer}

select {margin:0}
p {font-family: '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: 'Pretendard', sans-serif;
	font-size:16px;
	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:16px;
	color:#333;
	padding:0 5px 0 0;
}
input[type="checkbox"] + label span {
	width:22px;
	height:22px;
	margin:-2px 5px 0 0;
	vertical-align:middle;
	background-color:#fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ddd' 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");
	background-size:auto 22px;
	background-position:50% 50%;
	border:1px solid #ccc;
	border-radius:5px;
	cursor:pointer;
	display:inline-block;
}
input[type="checkbox"]:checked + label span {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' 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");
	background-color:#000;
	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:16px;
	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='%23E53935'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/g%3E%3C/svg%3E");
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
	font-family: 'Pretendard', sans-serif;
	color:#aaa !important;
}
::-moz-placeholder { /* Firefox 19+ */
	font-family: 'Pretendard', sans-serif;
	color:#aaa !important;
}
:-ms-input-placeholder { /* IE 10+ */
	font-family: 'Pretendard', sans-serif;
	color:#aaa !important;
}
:-moz-placeholder { /* Firefox 18- */
	font-family: '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);
}

/* Loader */
#loader {
	position:fixed;
	top:50%;
	left:50%;
	width:12px;
	height:12px;
	margin:-6px 0 0 -6px;
	background-color:rgba(0,0,0,1);
	border-radius:50%;
	z-index:9;
}
#loader:before {
	content:"";
	position:absolute;
	top:0px;
	width:12px;
	height:12px;
	border-radius:50%;
	animation:loader_L 2s ease-in-out infinite;
}
#loader:after {
	content:"";
	position:absolute;
	top:0px;
	width:12px;
	height:12px;
	border-radius:50%;
	animation:loader_R 2s ease-in-out infinite;
}
@keyframes loader_L {
	0% { left:-25px; background-color:rgba(0,0,0,1); }
	50% { left:0px; background-color:rgba(0,0,0,0); }
	100% { left:-25px; background-color:rgba(0,0,0,1); }
}
@keyframes loader_R {
	0% { right:-26px; background-color:rgba(0,0,0,1); }
	50% { right:0px; background-color:rgba(0,0,0,0); }
	100% { right:-26px; background-color:rgba(0,0,0,1); }
}

#wrap {
	width:100%;
	min-width:320px;
	max-width:1920px;
	min-height:100vh;
	margin:0 auto;
	display:flex;
	flex-direction:column;
	opacity:0;
}
#wrap.on { opacity:1; }

#headerWrap {
	position:fixed;
	top:0;
	left:0;
	right:0;
	padding:2.5rem 3.75rem 1.5rem 3.75rem;
	transition:all 1.5s cubic-bezier(0, 0, 0, 1);
	z-index:9;
}
#headerWrap:before {
	content:"";
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:rgba(255,255,255,0.6);
	-webkit-backdrop-filter:blur(10px);
	backdrop-filter:blur(10px);
	z-index:-1;
}

#header {
	width:100%;
	display:flex;
	flex-direction:row;
	align-items:center;
}
#header .logo {
	width:120px;
	height:60px;
	background-image:url("../img/logo.svg");
	background-size:auto 95%;
	background-position:0 50%;
	background-repeat:no-repeat;
	display:block;
}
#headerWrap.index .logo { filter:blur(10px); }
#headerWrap.index.on .logo { filter:blur(0px); }
#header .gnb {
	margin-left:auto;
	display:flex;
	gap:4rem;
	align-items:center;
}
#header .gnb a {
	font-family:'Paperlogy', sans-serif;
	font-size:1rem;
	color:#000;
	font-weight:600;
	padding:0.5rem;
	text-align:center;
	transition:all 0.25s ease-in-out;
	display:inline-block;
}
#header .gnb a.admin { color:#F20000 !important; }
#header .gnb:hover a { color:#919191; }
#header .gnb a:hover, #header .gnb a.active { color:#000; }
#header .gnb:has(a.active) a:not(.active) { color:#919191; }
#header .gnb:has(a.active) a:not(.active):hover { color:#000; }
#header .mNav {
	position:relative;
	width:30px;
	height:30px;
	margin-left:4rem;
	cursor:pointer;
}
#header .mNav i {
	position:absolute;
	top:50%;
	left:50%;
	width:20px;
	height:20px;
	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:70%;
	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:9px;
	left:0;
	right:0;
	transform:rotate(-45deg);
}
#header .mNav[data-state=true] i:after {
	top:9px;
	left:0;
	right:0;
	transform:rotate(45deg);
}
#header .mNav[data-state=true] i > span { width:0; }

#mNavMenu {
	position:fixed;
	top:-100%;
	left:0;
	width:100%;
	height:100vh;
	padding:2.5rem 3.75rem;
	background-color:#fff;
	transition:all 0.6s cubic-bezier(1, 0, 0, 1);
	display:flex;
	align-items:center;
	overflow:auto;
	opacity:0;
	z-index:5;
}
#mNavMenu:before {
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:#fff;
	z-index:-1;
}
#mNavMenu.on {
	top:0;
	opacity:1;
	transition:all 0.3s ease-in;
}
#mNavMenu .menuWrap {
	width:100%;
	padding:10rem 0;
	display:flex;
	gap:6rem;
	flex-direction:row;
	align-items:center;
}
#mNavMenu .menuList {
	min-width:50%;
	display:flex;
	gap:4rem;
	flex-direction:column;
	align-items:flex-start;
	justify-content:center;
}
#mNavMenu .menuList a {
	font-family:'Paperlogy', sans-serif;
	font-size:5rem;
	color:#000;
	font-weight:900;
	transition:all 0.5s ease-in-out;
}
#mNavMenu .menuList:hover a { color:#919191; }
#mNavMenu .menuList a:hover, #mNavMenu .menuList a.active { color:#000; }
#mNavMenu .menuList:has(a.active) a:not(.active) { color:#919191; }
#mNavMenu .menuList:has(a.active) a:not(.active):hover { color:#000; }
#mNavMenu .sideInfo {
	min-height:100%;
	margin-left:auto;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
}
#mNavMenu .subMenu {
	margin-top:auto;
	display:flex;
}
#mNavMenu .subMenu a {
	font-size:1.3rem;
	color:#000;
	font-weight:900;
	margin-right:3rem;
}
#mNavMenu .info {
	max-width:800px;
	padding-right:2rem;
	display:flex;
	gap:3.5rem;
	flex-direction:column;
	flex-wrap:wrap;
}
#mNavMenu .info li {}
#mNavMenu .info li h2 {
	font-size:0.9rem;
	color:#919191;
	font-weight:400;
	margin-bottom:1rem;
}
#mNavMenu .info li a.sns {
	width:40px;
	height:40px;
	min-height:40px;
	margin-right:0.6rem;
	background-color:#000;
	background-size:cover;
	background-position:50% 50%;
	background-repeat:no-repeat;
	border-radius:50%;
	transition:background-image 0.25s;
	display:inline-block;
}
#mNavMenu .info li a.naverblog { background-image:url('../img/naverblog.svg'); }
#mNavMenu .info li a.instagram { background-image:url('../img/instagram.svg'); }
#mNavMenu .info li strong {
	font-size:1.12rem;
	color:#616161;
	font-weight:600;
	word-break:keep-all;
	text-transform:uppercase;
	display:block;
}
#mNavMenu .info li span {
	font-size:1rem;
	color:#000;
	font-weight:400;
	word-break:keep-all;
	margin-top:1rem;
	text-transform:uppercase;
	display:block;
}
#mNavMenu .info li a {
	font-size:1rem;
	color:#616161;
	font-weight:600;
	word-break:keep-all;
	margin-top:1rem;
	text-transform:uppercase;
	display:block;
}

#footer {
	width:100%;
	margin-top:auto;
	padding:2.5rem 3.75rem;
	display:flex;
	gap:1.5rem;
	flex-direction:column;
	align-items:flex-end;
}
#footer .sns {
	display:flex;
	gap:0.6rem;
	flex-direction:row;
	align-items:center;
}
#footer .sns a {
	width:32px;
	height:32px;
	background-color:#000;
	background-size:cover;
	background-position:50% 50%;
	background-repeat:no-repeat;
	border-radius:50%;
	transition:background-image 0.25s;
	display:block;
}
#footer .sns a.naverblog { background-image:url('../img/naverblog.svg'); }
#footer .sns a.instagram { background-image:url('../img/instagram.svg'); }
#footer .fInfo {
	font-size:0.9rem;
	color:#616161;
	font-weight:400;
	text-transform:uppercase;
}
#footer .fInfo ul {
	display:flex;
	gap:1rem;
	align-items:center;
	justify-content:flex-end;
}
#footer .fInfo li {
	font-size:0.9rem;
	color:#616161;
	font-weight:400;
}
#footer .fInfo li em {
	color:#000;
	font-style:normal;
}
#footer .fInfo li a { color:#616161; }
#footer .fInfo li a:hover { border-bottom:1px dotted #616161; }

/*
+--------------------------------------------------------------------------------------+
+ Desktop Device greater than 1201px											+
+--------------------------------------------------------------------------------------+
*/
@media all and (min-width:1201px) {

}

/*
+--------------------------------------------------------------------------------------+
+ Tablet Device Less than 769px or greater than 1200px					+
+--------------------------------------------------------------------------------------+
*/
@media all and (min-width:769px) and (max-width:1200px) {
	#headerWrap { padding:2rem 1.5rem 1rem 1.5rem; }
	#header .gnb { display:none; }
	#header .mNav { margin-left:auto; }
	#mNavMenu {
		padding:4rem 3.75rem;
		align-items:flex-start;
	}
	#mNavMenu .menuWrap {
		margin-top:8rem;
		padding:0;
		flex-direction:column;
		align-items:flex-start;
		justify-content:flex-start;
	}
	#mNavMenu .menuList { gap:4rem; }
	#mNavMenu .menuList a { font-size:4rem; }
	#mNavMenu .sideInfo { margin:2em 0 0 0; }

	#footer {
		padding:2rem 1.5rem;
		gap:1.5rem;
		flex-direction:column;
		align-items:flex-end;
	}
	#footer .fInfo {
		font-size:0.9rem;
		text-align:right;
	}
	#footer .fInfo ul { flex-wrap:wrap; }
	#footer .fInfo li {
		font-size:0.9rem;
		color:#616161;
		font-weight:400;
	}
}

/*
+----------------------------------------------------------+
+ Mobile Device Less than 768px					+
+----------------------------------------------------------+
*/
@media all and (max-width:768px) {
	#headerWrap { padding:1.5rem 1rem; }
	#header .logo { height:45px; }
	#header .gnb { display:none; }
	#header .mNav { margin-left:auto; }
	#mNavMenu {
		padding:4rem 2rem;
		align-items:flex-start;
	}
	#mNavMenu .menuWrap {
		margin-top:6rem;
		padding:0;
		flex-direction:column;
		align-items:flex-start;
		justify-content:flex-start;
	}
	#mNavMenu .menuList { gap:3rem; }
	#mNavMenu .menuList a { font-size:3rem; }
	#mNavMenu .sideInfo { margin:0; }
	#mNavMenu .info {
		padding:0;
		gap:2.5rem;
	}
	#mNavMenu .info li h2 {
		font-size:0.8rem;
		margin-bottom:0.5rem;
	}
	#mNavMenu .info li a.sns { margin-top:0.5rem; }
	#mNavMenu .info li strong { font-size:1rem; }
	#mNavMenu .info li span {
		font-size:0.9rem;
		margin-top:0.5rem;
	}
	#mNavMenu .info li a {
		font-size:0.9rem;
		margin:0;
	}

	#footer {
		padding:1.5rem;
		gap:1.5rem;
		flex-direction:column;
		align-items:flex-start;
	}
	#footer .fInfo {
		font-size:0.8rem;
		text-align:left;
	}
	#footer .fInfo ul {
		margin-top:0.5rem;
		display:block;
	}
	#footer .fInfo li {
		font-size:0.8rem;
		color:#616161;
		font-weight:400;
	}
}