@charset "utf-8";

/* FONT Import */
@import url('./fonts.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap');

/* 초기화 */
html,body {
	width:100%;
	height:100%;
	font-family:"Noto Sans KR", "Nanum Gothic", "돋움", Dotum, Arial, AppleSDGothcNeo, AppleGothic, Sans-serif;
	margin:0;
	padding:0;
	background-color:#FAFAFA;
}
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:'Noto Sans KR', sans-serif;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, 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;font-size:1em}
input, button {margin:0;padding:0;font-family:'Malgun Gothic', Sans-serif;font-size:1em}
input[type="submit"]{cursor:pointer}
button {outline:0;cursor:pointer}

textarea, select {font-family:'Malgun Gothic', Sans-serif;font-size:1em}
select {margin:0}
p {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:#fff;
	background-color:rgba(38,50,56 ,1);
	text-shadow:none;
}
::-moz-selection {
	color:#fff;
	background:rgba(38,50,56 ,1);
	text-shadow:none;
}
::-webkit-selection {
	color:#fff;
 	background:rgba(38,50,56 ,1);
	text-shadow:none;
}

.placeholdersjs { color: #ddd !important; }

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

/* LOADING */
#loading {
	position:relative;
	top:50%;
	left:50%;
	width:12px;
	height:12px;
	margin:-6px 0 0 -6px;
	background-color:#DA2128;
	border-radius:50%;
}
#loading:before {
	content:"";
	position:absolute;
	top:0px;
	width:12px;
	height:12px;
	border-radius:50%;
	animation:loader_L 2s ease-in-out infinite;
}
#loading: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(218, 33, 40, 1); }
	50% { left:0px; background-color:rgba(218, 33, 40, 0); }
	100% { left:-25px; background-color:rgba(218, 33, 40, 1); }
}
@keyframes loader_R {
	0% { right:-26px; background-color:rgba(218, 33, 40, 1); }
	50% { right:0px; background-color:rgba(218, 33, 40, 0); }
	100% { right:-26px; background-color:rgba(218, 33, 40, 1); }
}

/* CONTAINER */
#wrap {
	position:relative;
	width:100%;
	min-width:1200px;
	max-width:1920px;
	height:100vh;
	min-height:600px;
	margin:0 auto;
	padding:0;
	text-align:center;
	display:flex;
	flex-direction:column;
	transition:opacity 0.25s;
	opacity:0;
}
#wrap.on { opacity:1; }

/* HEADER */
#header {
	position:relative;
	width:100%;
	padding:30px 50px;
	display:flex;
	flex-direction:row;
	align-items:center;
	z-index:1;
}
#header .header_logo {
	min-width:282px;
	height:60px;
	background-image:url('../img/header_logo.svg');
	background-size:auto 30px;
	background-position:0 50%;
	background-repeat:no-repeat;
	display:block;
}
#header .btn_logout {
	position:absolute;
	top:0;
	right:0;
	font-family:'Roboto', Sans-serif;
	font-size:13px;
	color:#FFF;
	font-weight:700;
	padding:10px 20px;
	background-color:#DA2128;
	display:block;
	z-index:999;
}

#cnb {
	max-height:60px;
	margin:0 auto;
	padding:0 0 0 50px;
	list-style:none;
	display:flex;
	flex-direction:row;
	align-items:center;
	flex-wrap:wrap;
}
#cnb li {
	margin:5px 0;
	padding:0 15px;
	cursor:pointer;
	text-align:center;
}
#cnb li span {
	position:relative;
	font-family:'Roboto', Sans-serif;
	font-size:16px;
	color:#919191;
	font-weight:400;
	padding:0 3px 5px 3px;
	transition:all 0.35s ease-in-out;
	display:inline-block;
}
#cnb li span:after {
	content:'';
	position:absolute;
	right:0;
	bottom:0;
	width:100%;
	height:1px;
	background-color:#212121;
	transform:scaleX(0);
	transform-origin:center;
	transition:all 0.35s ease-in-out;
	display:block;
}
#cnb li.current span { color:#212121; }
#cnb li.current span:after { transform:scaleX(1); }
#cnb li:hover span { color:#212121; }
#gnb {
	margin:0 auto;
	padding:0 30px;
	background:none;
	list-style:none;
	display:flex;
	flex-direction:row;
	align-items:center;
	flex-wrap:wrap;
}
#gnb li {
	margin:5px 0;
	padding:0 30px 0 0;
	cursor:pointer;
	text-align:left;
}
#gnb li a {
	position:relative;
	font-family:'Roboto', Sans-serif;
	font-size:16px;
	color:#919191;
	font-weight:400;
	padding:0 3px 5px 3px;
	transition:all 0.35s ease-in-out;
	display:inline-block;
}
#gnb li a:after {
	content:'';
	position:absolute;
	right:0;
	bottom:0;
	width:100%;
	height:1px;
	background-color:#212121;
	transform:scaleX(0);
	transform-origin:center;
	transition:all 0.35s ease-in-out;
	display:block;
}
#gnb li.current a { color:#212121; }
#gnb li.current a:after { transform:scaleX(1); }
#gnb li:hover a { color:#212121; }

#search {
	position:relative;
	margin-left:auto;
	overflow:hidden;
}
@media all and (min-width:1401px) {
	#search { min-width:320px; }
}
@media all and (max-width:1400px) {
	#search { min-width:280px; }
}
@media all and (max-width:1280px) {
	#search { min-width:220px; }
}
#search.hidden { visibility:hidden; }
#search .search_btn {
	position:absolute;
	top:1px;
	right:1px;
	width:39px;
	height:39px;
	background-image:url('../img/btn_search.svg');
	background-size:23px;
	background-position:50% 50%;
	background-repeat:no-repeat;
	cursor:pointer;
}
#search .search_box {
	position:relative;
	width:100%;
	visibility:hidden;
	opacity:0;
	transition:all 0.5s ease-in-out;
	z-index:9;
}
#search .search_box.on { visibility:visible; opacity:1 }
#search .search_input {
	width:100%;
	font-size:14px;
	line-height:39px;
	padding:0 50px 0 20px;
	border:1px solid #CCC;
	border-radius:50px;
	outline:none;
	text-align:left;
}
#search .search_input:focus {
	background-color:#FFF;
	border:1px solid #DA2128 !important;
	box-shadow:0 0 0 transparent !important;
}
#search .search_input::placeholder {
	color:#aaa;
	font-weight:400;
	line-height:39px;
}
#search .search_submit {
	position:absolute;
	top:1px; /* Border Height */
	right:1px; /* Border width */
	width:39px;
	height:39px;
	background-color:transparent;
	background-image:url('../img/btn_search.svg');
	background-size:20px;
	background-position:0 50%;
	background-repeat:no-repeat;
	border:0;
	border-radius:50%;
	outline:none;
}

/* INDEX VISUAL */
#idx_visual {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	overflow:hidden;
}
#idx_visual .slide_box {
	margin:0;
	padding:0;
	list-style:none;
}
#idx_visual .slide_box li {
	width:100%;
	background-size:cover;
	background-position:50% 50%;
	background-repeat:no-repeat;
	display:block;
}
#idx_visual .slide_box li:nth-child(1) { background-image:url('../../../../index_photo/photo01.jpg'); }
#idx_visual .slide_box li:nth-child(2) { background-image:url('../../../../index_photo/photo02.jpg'); }
#idx_visual .slide_box li:nth-child(3) { background-image:url('../../../../index_photo/photo03.jpg'); }
#idx_visual .slide_box li:nth-child(4) { background-image:url('../../../../index_photo/photo04.jpg'); }
#idx_visual .slide_box li:nth-child(5) { background-image:url('../../../../index_photo/photo05.jpg'); }
#idx_visual .slide_box li:nth-child(6) { background-image:url('../../../../index_photo/photo06.jpg'); }
#idx_visual .slide_box li:nth-child(7) { background-image:url('../../../../index_photo/photo07.jpg'); }
#idx_visual .slide_box li:nth-child(8) { background-image:url('../../../../index_photo/photo08.jpg'); }
#idx_visual .slide_box li:nth-child(9) { background-image:url('../../../../index_photo/photo09.jpg'); }
#idx_visual .slide_box li:nth-child(10) { background-image:url('../../../../index_photo/photo10.jpg'); }
#idx_visual .arrow {
	position:absolute;
	top:50%;
	width:60px;
	height:60px;
	background-color:transparent;
	border:0;
	overflow:hidden;
	outline:none;
	transform:translateY(-50%);
	z-index:1;
	display:block;
}
#idx_visual .arrow:after {
	content: '';
	position:absolute;
	top:50%;
	left:50%;
	width:30px;
	height:30px;
	transition:all 0.25s ease-in-out;
	display:block;
}
#idx_visual .arrow.slide_prev { left:50px; }
#idx_visual .arrow.slide_prev:after {
	margin:-15px 0 0 -15px;
	border-top:2px solid rgba(0,0,0,0.3);
	border-left:2px solid rgba(0,0,0,0.3);
	transform:rotate(-45deg);
	display:block;
}
#idx_visual .arrow.slide_next {
	right:50px;
}
#idx_visual .arrow.slide_next:after {
	margin:-15px 0 0 -15px;
	border-bottom:2px solid rgba(0,0,0,0.3);
	border-right:2px solid rgba(0,0,0,0.3);
	transform:rotate(-45deg);
	display:block;
}
#idx_visual .arrow.slide_prev:hover:after,
#idx_visual .arrow.slide_next:hover:after { border-color:rgba(0,0,0,1); }

/* FOOTER */
#footer {
	min-width:1200px;
	padding:30px;
	display:block;
}
#footer.fixed {
	position:fixed;
	left:0;
	right:0;
	bottom:0;
	z-index:9;
}
#footer .footer_inner {
	position:relative;
	margin:0 auto;
	text-align:center;
}
#footer aside {
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:center;
}
#footer .footer_logo {
	min-width:125px;
	height:13px;
	background-image:url('../img/header_logo.svg');
	background-size:auto 13px;
	background-position:50% 50%;
	background-repeat:no-repeat;
	display:inline-block;
}
#footer .footer_inner span {
	font-size:15px;
	color:#616161;
	font-weight:400;
	margin-left:30px;
	text-align:left;
	display:inline-block;
}
#footer .footer_inner p {
	font-family:"Roboto", sans-serif;
	font-size:14px;
	color:#919191;
	font-weight:400;
	margin-top:10px;
	padding:0;
	text-align:center;
	display:block;
}
#footer .sns {
	position:absolute;
	top:0;
	left:0;
}
#footer .sns a {
	width:32px;
	height:32px;
	margin-left:10px;
	background-size:auto 32px;
	background-position:50% 50%;
	background-repeat:no-repeat;
	opacity:0.5;
	transition:all 0.35s ease-in-out;
	display:inline-block;
}
#footer .sns a:hover { opacity:1; }
#footer .sns a:nth-child(1) { background-image:url('../img/icon_instagram.svg'); }
#footer .sns a:nth-child(2) { background-image:url('../img/icon_blog.svg'); }

/* ABOUT */
#about {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	min-width:1200px;
	padding:50px;
	background-color:#FFF;
	transition:all 0.15s cubic-bezier(0.25, 0.5, 0.25, 1);
	overflow:hidden;
	opacity:0;
	visibility:hidden;
	z-index:99;
}
#about.on {
	opacity:1;
	visibility:visible;
	transition:all 0.35s cubic-bezier(0.25, 0.5, 0.25, 1);
}
#about .content_box {
	margin-top:120px;
}
#about .content_box article {
	width:100%;
	margin:0 auto;
	text-align:left;
}
#about .content_box article p {
	font-size:16px;
	color:#727272;
	font-weight:300;
	line-height:1.75em;
	letter-spacing:-0.05em;
	margin-bottom:30px;
}
#about .content_box article b,
#about .content_box article strong {
	color:#212121;
	font-weight:700;
	text-transform:uppercase;
}
#about .content_box article strong { display:block; }
#about .book {
	margin-top:80px;
	text-align:left;
}
#about .book h1 {
	font-family:'Roboto', Sans-serif;
	font-size:18px;
	color:#212121;
	font-weight:700;
	margin-bottom:10px;
}
#about .book img {
	width:auto;
	height:400px;
	margin-right:5px;
	border:1px solid #eaeaea;
}
#about .book p {
	font-size:16px;
	color:#727272;
	font-weight:400;
	margin-top:10px;
}
#about .company_info {
	margin-top:80px;
	display:flex;
	flex-direction:column;
}
#about .company_info h1 {
	display:flex;
	flex-direction:row;
	align-items:center;
}
#about .company_info h1 em {
	font-size:16px;
	color:#616161;
	font-style:normal;
	font-weight:500;
	padding:6px 10px;
	border:1px solid #616161;
	text-align:center;
	display:inline-block;
}
#about .company_info h1 strong {
	font-family:'Roboto', Sans-serif;
	font-size:36px;
	color:#212121;
	font-style:normal;
	font-weight:800;
	margin-left:30px;
	text-align:left;
	display:inline-block;
}
#about .company_info dl {
	width:600px;
	margin-top:50px;
	padding:0;
	list-style:none;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
}
#about .company_info dl dt {
	width:50%;
	font-size:14px;
	color:#212121;
	font-weight:300;
	margin-top:10px;
	text-align:left;
}
#about .company_info dl dd {
	width:100%;
	font-size:14px;
	color:#212121;
	font-weight:300;
	margin-top:10px;
	text-align:left;
}
#about .company_info dl em {
	width:100px;
	font-family:'Roboto', Sans-serif;
	font-size:14px;
	color:#212121;
	font-style:normal;
	font-weight:500;
	display:inline-block;
}
#about .company_info #mapAPI {
	width:1000px;
	height:500px;
	margin-top:50px;
	filter:grayscale(1);
}

/* HISTORY */
#history {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	min-width:1200px;
	padding:50px;
	background-color:#FFF;
	transition:all 0.15s cubic-bezier(0.25, 0.5, 0.25, 1);
	overflow:hidden;
	opacity:0;
	visibility:hidden;
	z-index:99;
}
#history.on {
	opacity:1;
	visibility:visible;
	transition:all 0.35s cubic-bezier(0.25, 0.5, 0.25, 1);
}
#history .history_adm {
	min-width:80px;
	height:40px;
	font-size:0.8rem;
	font-weight:700;
	line-height:40px;
	color:#fff;
	margin-left:auto;
	padding:0;
	background-color:#212121;
	border:0;
	outline:0;
	text-align:center;
	text-decoration:none;
	display:inline-block;
}
#history h1 {
	font-family:'Ubuntu', Sans-serif;
	font-size:48px;
	font-weight:700;
	color:#DA2128;
	line-height:60px;
	margin-top:10px;
	text-align:left;
}
#history .content_box {
	margin-top:120px;
}

#con_logo {
	position:absolute;
	top:30px;
	left:50px;
	width:282px;
	height:60px;
	background-image:url('../img/header_logo.svg');
	background-size:auto 30px;
	background-position:0 50%;
	background-repeat:no-repeat;
	cursor:pointer;
	display:block;
}
button.cnb_close {
	position:fixed;
	top:40px;
	right:50px;
	width:50px;
	height:50px;
	background-color:transparent;
	background-image:url('../img/btn_close.svg');
	background-size:auto 30px;
	background-position:50% 50%;
	background-repeat:no-repeat;
	border:0;
	box-shadow:inset 0 0 0 1px #eaeaea;
	outline:0;
	display:none;
	z-index:9;
}

/* CONTENTS */
#contents {
	width:100%;
	padding-top:180px;
}

/* Top Button */
#btn_top {
	position:fixed;
	bottom:30px;
	right:-30px;
	width:50px;
	height:50px;
	background-color:rgba(0,0,0,1);
	background-image:url("../img/btn_top.svg");
	background-size:auto 24px;
	background-position:50% 50%;
	background-repeat:no-repeat;
	border:0;
	border-radius:50%;
	transition:all 1.5s cubic-bezier(0.25, 0.7, 0, 1.5);
	opacity:0;
	z-index:9;
}
#btn_top.on { right:30px; opacity:1; }
#btn_top:hover { background-color:rgba(218, 33, 40, 1); }