@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cardo:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">');
@import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; list-style-type: none;}

.hide_menu { color:#ccc !important }

#skipNav { position:relative; z-index:9999; }
#skipNav a { position: absolute; top: -200px; left:0; width: 100%; line-height: 40px; font-size : 18px; text-align :center; color : #fff; background-color: #136bd8; border: 1px solid #dedede; } 
#skipNav a:focus, 
#skipNav a:active { top: 0; }

.hide-txt { overflow: hidden; position: absolute; width: 1px; height: 1px; font-size: 1px;  line-height: 0; clip: rect(0 0 0 0);  white-space: nowrap;  margin: -1px; padding: 0;  border: 0; }

.quickMu{ position: absolute; right: 60px; top: 320px;	z-index: 10000; }
.quickMu ul li:first-child { background: #00296e; color: #fff; border-radius: 5px;}
.quickMu ul li:last-child { width: 50px;background: #555;border-radius: 100px;margin: 20px auto; }
.quickMu ul li:last-child a{ color: #fff; font-size: 1.2rem; }

.quickMu ul li{ font-size: 1.6rem; background: #c4d8eb; padding: 15px; text-align: center; border: 1px solid #fff; }
.quickMu ul li a{ color: #00296e; }

@-webkit-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}

	40% {
		-webkit-transform: translateY(-5px);
		transform: translateY(-5px);
	}

	60% {
		-webkit-transform: translateY(-2px);
		transform: translateY(-2px);
	}
}

@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}

	40% {
		-webkit-transform: translateY(-5px);
		transform: translateY(-5px);
	}

	60% {
		-webkit-transform: translateY(-2px);
		transform: translateY(-2px);
	}
}

@-webkit-keyframes fadeInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-20px);
		transform: translateX(-20px);
	}

	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
}

@keyframes fadeInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-20px);
		-ms-transform: translateX(-20px);
		transform: translateX(-20px);
	}

	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0);
	}
}

@-webkit-keyframes fadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@-webkit-keyframes anim-francisco {
	50% {
		opacity: 1;
		-webkit-transform: translate3d(-46%, 0%, 0);
		transform: translate3d(-46%, 0%, 0);
	}

	51% {
		opacity: 1;
		-webkit-transform: translate3d(-46%, -0%, 0);
		transform: translate3d(-46%, -0%, 0);
	}

	100% {
		opacity: 1;
		-webkit-transform: translate3d(-46%, -48%, 0);
		transform: translate3d(-46%, -48%, 0);
	}
}

.fadeIn {
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
}

.francis {
	-webkit-animation: anim-francisco 0.3s forwards;
	animation: anim-francisco 0.3s forwards;
}

#wrap { position: relative; width: 100%; height: 100%; }
#header { position: relative; width: 100%; z-index: 100; }

.logo { float: left; padding: 30px 0 0 0;}

.sideBtn { float: right; }
.sideBtn > a {
	width: 160px; height:50px;
	float: left;
	font-weight: 400;
	margin-top: 25px;
	letter-spacing: -1px;
	border-radius: 5px;
	color: #fff; 
	font-size: 2rem; 
	padding-top: 10px;
	background:#00296e;
}

.sideBtn_box {
	display: none;
	float: left;
	margin-top: 40px;
	position: relative;
	width: 17px; height: 17px;
}

.sideBtn_box .line {
	position: absolute;
	width: 5px; height: 5px;
	background: #111;
}

.sideBtn_box > .line:nth-child(2) { top: 0; left: 0; }
.sideBtn_box > .line:nth-child(3) { top: 0; right: 0 }
.sideBtn_box > .line:nth-child(4) { bottom: 0; left: 0 }
.sideBtn_box > .line:nth-child(5) { bottom: 0; right: 0 }

.headWrap {
	position: fixed; top: 0; left: 0;
	width: 100%; height: 100px;
	background: rgba(255, 255, 255, .95);
	backdrop-filter: blur(10px);
	box-shadow: 3px 3px 5px 1px rgb(0 0 0 /3%);
	z-index: 3;
}

.headWrap .inner {
	position:relative;
	width: 1440px;
	height: 100px;
	margin: 0 auto;
	text-align: center;
	z-index: 10;
}

.gnb {
	position: fixed; top: 0; left: 0;
	width: 100%; height: 100px;
	z-index: 11;
}

.gnb .fa-external-link { position: relative; width: 25px; height: 15px; }
.gnb .fa-external-link:before { content: ""; position: absolute; top: -4px; width: 25px; height: 25px; }
.gnb .fa-external-link {position: relative; width: 25px; height: 15px;}
.gnb .fa-external-link:before {content: ""; position: absolute; top: -4px; width: 25px; height: 25px; }

.side-bar { display: none; position: fixed; right: 0; top: 0; width: 100%; height: 100vh; background: #fff; overflow-y: auto; box-shadow: -10px -1px 20px rgba(0,0,0,0.1); transition: 0.4s; z-index: 9899999; }
.side-bar .fa-external-link { position: relative; width: 25px; height: 15px; }
.side-bar .fa-external-link:before { content: ""; position: absolute; top: -4px; width: 25px; height: 25px; }
.side-bar-top { position: relative; width: 100%; height: 80px; }
.side-logo { position: absolute;top: 46%;left: 2%;transform: translateY(-50%);width: 200px;height: 60px; }
.side-close-btn { position: absolute; top:50%; right: 2%; transform: translateY(-50%); width: 30px; height: 30px; cursor: pointer; }
.side-close-btn:before,
.side-close-btn:after { content: ""; position: absolute; top: 50%; left:0; width: 100%; height: 2px; background: #000; }
.side-close-btn:before { transform: translateY(-50%) rotate(-45deg); }
.side-close-btn:after { transform: translateY(-50%) rotate(45deg); }
.side-menu { position: relative; width: 90%; margin: 0 auto;text-align:left; }
.side-menu .gnb-1depth { margin-top:30px; }
.side-menu .gnb-1depth > li > a {font-size: 1.9rem; font-weight: 700; }
.side-menu .gnb-2depth { padding:15px 0; }
.side-menu .gnb-3depth { padding:5px 0 10px 0; }

.gnb-1depth a {display: block; position: relative; line-height: 2.2; transition: 0.4s !important;z-index:99999}
.gnb-1depth > li > a {font-size: 1.5rem; font-weight: 500;}
.gnb-1depth > li > a.active .highlight {display: inline-block; position: relative;}
.gnb-1depth > li > a.active .highlight:after {content: ""; position: absolute; bottom: 10px; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, #1ea0c3, #82ba3b); z-index:999;}
.gnb-2depth {display: none;transition:none !important}
.side-bar .gnb-2depth {display: block;}
.gnb-1depth > li > a.active + .gnb-2depth {display: block;}
.gnb-2depth > li > a {padding-left: 4%; font-size: 1.7rem;}
.gnb-2depth > li > a:before {content: ""; position: absolute; top:50%; left:2%; width: 2px; height: 2px; background: #dcdcdc;}
.gnb-3depth > li > a {padding-left: 10%; font-size: 1.4rem; color: #555;font-weight:300}
.gnb-3depth > li > a:before {content: ""; position: absolute; top:50%; left:5%; width: 5px; height: 1px; background: #555;}

.plus-btn {display: inline-block; position: absolute; top:50%; right: 2%; transform: translateY(-50%); width: 15px; height: 15px; transition: 0.4s !important;}
.plus-btn:before, .plus-btn:after {content: ""; position: absolute; top: 50%; left:0; transform: translateY(-50%); width: 100%; height: 1px; background: #000; transition: 0.4s;}
.plus-btn:after {transform: translateY(-50%) rotate(90deg);}
.gnb-1depth > li > a.active .plus-btn:after {transform: translateY(-50%) rotate(0);}

@media screen and (min-width: 500px){
	.side-bar {width: 80%;}
}

@media screen and (min-width: 600px){
	.side-bar {width: 70%;}
}

@media screen and (min-width: 1280px){

	.gnb { position:fixed;display: block;  height: 100px;left:calc(50% - 486px);top:0; z-index:3;width:990px;margin:0 auto;text-align:center; }
	.gnb .gnb-1depth {width: 100%; padding-left: 2px; text-align: center;position: relative;height:100px;}
	.gnb .gnb-3depth > li > a {line-height:0;}
	.gnb .gnb-1depth > li { display: inline-block;  padding:0 32px;margin-top:0;position: relative;}
	.gnb .gnb-1depth > li:last-child:after {content: none;}
	.gnb .gnb-1depth > li > a {font-size: 2.1rem; line-height:100px;color: #000; transition: 0.4s; display:block; width:100%;height:100%;font-family: 'Poppins';}
	.gnb .gnb-1depth > li > a.active {color: #136bd8;}
	.gnb .gnb-1depth > li > a:hover {color: #136bd8;}
	.gnb .gnb-1depth > li > a:before { content: ""; position: absolute; bottom:-1%; left:0%; transform: translateY(-50%); width: 100%; height: 3px; background:#136bd8; opacity:0; transition:all 0.3s; }
	.gnb .gnb-1depth > li > a.active:before {opacity:0}
	.gnb .gnb-1depth > li > a:hover:before {opacity:1}
	.gnb .gnb-2depth {position:fixed; top: 100px; left: 0; width: 100%; height: 220px; background:#fff; box-shadow:inset 1px 1px 20px 1px rgb(0 0 0 / 10%); overflow: hidden;z-index:15}
	.gnb .gnb-2depth:after {content: ""; position: absolute; bottom: -100px; right: -40px; width: 410px; height: 420px;}
	.gnb .gnb-2depth > li {display: inline-block; position: absolute; width: 21%;}
	.gnb .gnb-2depth > li:first-child {top:0; left: 0; width: 25%; height: 100%; padding: 40px 2% 0 2%; background:#00296e; text-align: left; }
	.gnb .left-title { position: relative; width: 90%; margin: 0 0 25px 10%; font-size: 2.4rem; font-weight: 500; color: #fff;}
	.gnb .left-title span {position: relative; left: 2%; z-index: 1;}
	.gnb .left-title:before {content: ""; position: absolute; bottom: 2px; left: 0; width: 80%; height: 9px; z-index: 0;}
	.gnb .left-subtitle {width: 90%; margin: 0 0 25px 10%; font-size: 1.8rem; font-weight: 400; color: #fff; word-break: keep-all; }
	.gnb .gnb-2depth > li {width: 15%;}
	.gnb .gnb-2depth > li:first-child {width: 25%;}
	.gnb .gnb-2depth > li:nth-child(2) {top: 40px; left: 30%;}
	.gnb .gnb-2depth > li:nth-child(3) {top: 40px; left: 47%;}
	.gnb .gnb-2depth > li:nth-child(4) {top: 40px; left: 64%;}
	.gnb .gnb-2depth > li:nth-child(5) {top: 140px; left: 30%;}
	.gnb .gnb-2depth > li:nth-child(6) {top: 140px; left: 47%;}
	.gnb .gnb-2depth > li:nth-child(7) {top: 140px; left: 64%;}
	.gnb .gnb-2depth > li:nth-child(8) {top: 120px; left: 60%;}
	.gnb .gnb-2depth > li:nth-child(9) {top: 130px; left: 75%;}
	.gnb .gnb-2depth > li:nth-child(10) {top: 230px; left: 30%;}
	.gnb .gnb-2depth > li:nth-child(11) {top: 230px; left: 45%;}
	.gnb .gnb-2depth > li:nth-child(12) {top: 230px; left: 60%;}
	.gnb .gnb-2depth > li:nth-child(13) {top: 230px; left: 75%;}

	.gnb .gnb-2depth > li > a {position: relative; padding-left: 0; border-bottom: 1px solid #888; text-align: left; font-size: 1.7rem; font-weight: 600; letter-spacing: 0rem; color: #333; letter-spacing: -1px;transition: 0.2s; }
	.gnb .gnb-2depth > li > a:hover { border-bottom:0px; }
	.gnb .gnb-2depth > li > a:after{ content: ""; position: absolute;	bottom:0%; left:0%; width: 00%; height: 2px; background:#888; transition:all 0.3s; }
	.gnb .gnb-2depth > li > a:hover:after{ content: ""; position: absolute; left:0%; width: 100%;	height: 2px; background:#136bd8; }
	.gnb .gnb-2depth > li > a:hover, 
	.gnb .gnb-2depth > li > a:active, 
	.gnb .gnb-2depth > li > a:focus {text-decoration: none; color: #136bd8;}
	.gnb .gnb-3depth {padding-top: 20px;}
	.gnb .gnb-3depth > li > a {text-align: left; color: #555; font-size: 1.7rem; font-weight: 500;}
	.gnb .gnb-3depth > li > a:before {width: 3px; height: 3px; background: #dcdcdc;}

}

@media screen and (min-width: 1500px){

	.gnb .left-title {width: 58%; margin: 0 0 25px 42%;}
	.gnb .left-subtitle {width: 58%; margin: 0 0 25px 42%;}
	.gnb .gnb-2depth > li {width: 15%;}
	.gnb .left-bg {left: 60%;}
	.gnb .gnb-2depth > li:first-child {width: 25%;}
	.gnb .gnb-2depth > li:nth-child(2) {top: 40px; left: 30%;}
	.gnb .gnb-2depth > li:nth-child(3) {top: 40px; left: 50%;}
	.gnb .gnb-2depth > li:nth-child(4) {top: 40px; left: 70%;}
	.gnb .gnb-2depth > li:nth-child(5) {top: 100px; left: 30%;}
	.gnb .gnb-2depth > li:nth-child(6) {top: 140px; left: 47%;}
	.gnb .gnb-2depth > li:nth-child(7) {top: 140px; left: 64%;}
	.gnb .gnb-2depth > li:nth-child(8) {top: 130px; left: 60%;}
	.gnb .gnb-2depth > li:nth-child(9) {top: 130px; left: 75%;}
	.gnb .gnb-2depth > li:nth-child(10) {top: 230px; left: 30%;}
	.gnb .gnb-2depth > li:nth-child(11) {top: 230px; left: 45%;}
	.gnb .gnb-2depth > li:nth-child(12) {top: 230px; left: 60%;}
	.gnb .gnb-2depth > li:nth-child(13) {top: 230px; left: 75%;}
	.depth03 {margin-top:20px;}
	.depth03 li {
		position:relative;
		font-size:1.6rem;
		text-align:left;
		font-weight:300;
		letter-spacing:0.1rem;
		padding-left:20px;
		margin-bottom:20px;
	}
	
	.depth03 li a {line-height:1.9rem}
	.depth03 li:after {
		content: "";
		position: absolute;
		top: 50%;
		left:0%;
		transform: translateY(-50%,);
		width: 4px;
		height: 4px;
		background:#333;
	}

}

#footer {position:relative;width:100%;}
.footWrap {position:relative;width:100%;height:260px;background:#333}
.footWrap .inner {width:1440px;margin:0 auto;text-align:center;padding-top:50px;display:flex}
.footWrap .inner > div {position:relative}
.footWrap .inner .inner_left {width:30%;margin-right:2%;text-align:left;}
.footWrap .inner .inner_left p:last-child {color:#fff;font-size:1.4rem;;font-weight:300;padding-top:55px;}
.footWrap .inner .inner_right {padding:10px 0 0 45px;width:68%;margin-right:2%;text-align:left;}
.footWrap .inner .inner_right:before {
	content: "";
	position: absolute;
	top: 80px;
	left:0%;
	transform: translateY(-50%);
	width:1px;
	height: 150px;
	background:#888
}

.footWrap .inner .inner_right span {display:block;color:#fff;font-size:1.4rem;;font-weight:500;}
.footWrap .inner .inner_right p {color:#c8cacb;font-size:1.4rem;;font-weight:300;  }
.footWrap .inner .inner_right span.scd {padding-top:30px;}


.sns {position:absolute;bottom:5%;right:20%;}
.sns ul {position:relative;display:flex;justify-content:space-between}
.sns ul li {position:relative;color:#fff;font-size:1.4rem;;font-weight:300;padding-left:27px;margin:0 34px 0 0;}
.sns ul li a {color:#fff}
.sns ul li:after {
	content: "";
	position: absolute; top: 50%; left:0%;
	transform: translateY(-50%);
	width: 20px; height:18px;
	background: url('/files/img/icon/insta_icon.png') no-repeat;
}

.sns ul li:nth-child(2):after {
    background: url('/files/img/icon/youtube_icon.png');
}

.sns ul li:nth-child(3):after {
    background: url('/files/img/icon/webzine_icon.png');
}

@media(max-width:500px){
	.quickMu {display:none;}
}