@charset "utf-8";

/* common */
html,body,div,span,applet,object,iframe,h1,h2,h3, h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,dialog,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {
 margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
article,aside,details,dialog,figcaption,figure,footer,header,hgroup,menu,nav,section {display: block;}
ol,ul,li {list-style: none}
blockquote,q {quotes: none}
blockquote:before,blockquote:after,q:before,q:after  {content: ''; content: none;}
ins {background-color: #ff9; color: #000; text-decoration: none;}
del {text-decoration: line-through;}
table {border-collapse: collapse; border-spacing: 0;}
abbr[title], dfn[title] {border-bottom:1px dotted #000; cursor: help}
hr {display: block; height: 1px; border: 0; border-top: 1px solid #c7c7c7; margin: 1em 0; padding: 0;}
*{margin:0; padding:0; }
li{list-style:none;}
img {border:0 none;}
.hidden {position:absolute; left:-9999px; top:-9999px; width:0; height:0; font-size:0; line-height:0;}
form {min-width: auto;}
input[type="image"] {border:0 none;}
button, input[type="submit"] {cursor: pointer; border:0 none;}
button::-moz-focus-inner {border: 0 none; padding: 0;}
body {background-color:#ffffff; word-wrap:break-word; word-break:break-all;  zoom:1; -webkit-text-size-adjust: 100%;}
body,html {position:relative; height:100%;}

body,th,td,input,select,textarea,button {font-weight:400; font-size:17px; line-height:1.5; font-family: 'NanumSquare', sans-serif; color:#333;} /* color값은 디자인가이드에 맞게사용 */
a{font-family: 'NanumSquare', sans-serif; text-decoration:none; color:#333; transition:.3s;} /* color값은 디자인가이드에 맞게사용 */

/* */
.t_c {text-align: center !important;}
.t_l {text-align: left !important;}
.t_r {text-align: right !important;}
.mt20 {margin-top: 20px !important;}
.mb20 {margin-bottom:  20px !important;}
.color_666 {color: #666 !important;}

@media screen and (min-width: 1201px) {
	.pc_none {display: none !important;}
}
@media screen and (max-width: 1200px) {
	.pc_only {display: none !important;}
}
@media screen and (min-width: 768px) {
	.mb_only {display: none !important;}
}
@media screen and (max-width: 767px) {
	.mb_none {display: none !important;}
}

.inner {margin:0 auto; max-width:1200px;padding: 0;}
@media screen and (max-width:1200px) { 
	.inner {width:100%;padding: 0 20px;;}
}

/* layer */
.layer {display:none; position:fixed; position:absolute; top:0; left:0; width:100%; height:100%; z-index:1000;}
.layer .bg {position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.5; filter:alpha(opacity=50);}
.layer .pop-layer {display:block;}
.pop-layer {display:none; position: absolute; top: 50%; left: 50%; width: 350px; height:auto;  background-color:#fff; border: 3px solid #555; z-index: 10;}
.pop-layer .pop-container {padding: 20px 25px;}
input[type="text"],input[type="password"],textarea,input[type="submit"] {-webkit-appearance: none; -webkit-border-radius: 0;}
.pop-layer .board-password-txt {font-size:13px; line-height:18px; text-align:center;}
.pop-layer .board-password-input {margin:40px; text-align:center;}
.pop-layer .board-password-input label{display:inline-block; margin:0 10px 0 0;	font-size:12px; color:#333; vertical-align:middle;}
.pop-layer .board-password-input input{display:inline-block; padding:0 0 0 8px; width:150px; height:26px; border:1px solid #d8d8d8; color:#555; vertical-align:middle;}
	/* btn */
.pop-layer .board-password-btn {text-align:center;}
.pop-layer .board-password-btn a{display:inline-block; margin:0 5px; padding:10px 30px; box-sizing:border-box; text-decoration:none; font-size:13px;}
.pop-layer .board-password-btn .board-password-btn-list {background:#d3d3d3; color:#464646;}
.pop-layer .board-password-btn .board-password-btn-ok {background:#111; color:#fff;}

/* ---------------------------------- layout */
html, body {height:100%;}
#wrapeer {overflow:hidden; width:100%;}

@media screen and (min-width:321px) { 
body {overflow-x:hidden;} 
}
/*
	header
*/
#header {position:fixed; top:0; width:100%; border-bottom:1px solid rgba(255,255,255,.2);background: rgba(0,0,0,.2);z-index:1000;}
#header:before {
	content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 0;
    background: rgba(0,0,0,.8);
    -webkit-transition: .2s all ease-in-out;
		-ms-transition: .2s all ease-in-out;
			transition: .2s all ease-in-out;
}
#header:hover:before,
#header.fixed:before {
	height: 100%;
}

#header .header-top {width:100%; background-color:#f1f1f1;}
#header .header-top dl {margin:0 auto; width:1200px; text-align:right; font-size:0; line-height:0;}
#header .header-top dd {display:inline-block; width:130px;}
#header .header-top dd a {display:block; font-size:13px; line-height:30px; text-align:center; letter-spacing:0.5px;}
#header .header-top dd.lang a {background-color:#555555; color:#fff;}

#header .header-bottom {margin:0 auto; width:1200px;display: flex;align-items: center;}
#header .header-bottom:after {content:''; display:block; clear:both;}
#header .logo {float:left;z-index: 1;font-size: 0;}
#header .logo a {display:block; width:100%;}

@media screen and (max-width:1200px) {
	#header .header-top {display:none;}
	#header .header-bottom {padding:0 30px; width:100%; height:80px; }
	#header .logo a {}
	#header .logo a img {width:auto;max-width: 100%;}
}
@media screen and (max-width:767px) {
	#header .header-bottom {padding:0 20px; height:55px;}
	#header .logo a {height:30px;}
	#header .logo a img {height: 100%;}
}

/* web gnb */
#header .gnb {display:inline-block; width:calc(100% - 106px); vertical-align:top; text-align:center;}

#header .w-lang {overflow:hidden; float:right;padding: 32px 0;}
#header .w-lang dd {float:left; margin-left: 8px; border-right:2px solid #bce1fe;}
#header .w-lang dd a {position: relative;display:block; font-size:17px; color: #bce1fe; font-family: 'Noto Serif', serif; padding-right:5px; line-height: 1em;}
#header .w-lang dd:last-child{border-right:0 !important;}
#header .w-lang dd a img {border:1px solid #cecece;}

@media screen and (min-width:1201px) {
	#header {max-height:84px;}
	#header .m-menu-btn,
	#header .m-gnb-bg,
	#header .m-lang {display:none;}
		/* 1depth */
	#header .gnb > ul {display:inline-block; vertical-align:top; font-size:0; line-height:0;}
	#header .gnb > ul > li {position:relative; display:inline-block; padding:0 20px; vertical-align:top;}
	#header .gnb > ul > li > a {display:block; font-size:17px; line-height:84px; color:#fff; font-family: 'Noto Serif', serif;}

	/* #header .gnb > ul > li:hover > a {color:#003e7e;} */
		/* 2depth */
	#header .gnb .depth2 {display:none; position:absolute; top:78px; left:50%; z-index:0; margin-left:-100px; width:200px; height:0; border-top:5px solid #0054a6; background:rgba(0,0,0,.7); text-align:center; transition:.3s; opacity:0;}
	#header .gnb .depth2 li {position: relative;transition:.3s; border-top:1px solid rgba(51,51,51,.7);}
	/* #header .gnb > ul > li:last-child .depth2 {left:0; width:calc(100% + 30px);}
	#header .gnb > ul > li:nth-child(3) .depth2 {width:calc(100% + 20px);} */
	#header .gnb .depth2 a {position: relative;display:block; padding:12px 0; font-size:16.5px; line-height:20px; color:#fff; letter-spacing:-0.5px; text-transform:uppercase; word-break:keep-all;font-weight: 400;}
	#header .gnb .depth2 li.in > a {
		padding-left: 20px;
		padding-right: 20px;
	}
	#header .gnb .depth2 li.in > a:after {
		position: absolute;
		font-family: 'FontAwesome';
		content: "\f054";
		font-size: 10px;
		top: 50%;
		right: 10px;
		-webkit-transform: translateY(-50%);
			-ms-transform: translateY(-50%);
				transform: translateY(-50%);
		color: rgba(255,255,255,.8);
	}
	#header .gnb .depth2 li:hover {background: #000; transition:.3s;}

	#header .gnb > ul > li:hover .depth2 {display:block; z-index:9999; height:auto; opacity:1;}
	
	/* 3depth */
	#header .gnb .depth2 ul {
		position: absolute;
		display: none;
		width: 100%;
		top: -1px;
		left: 100%;
		background: rgba(6,6,6,.7);
	}
	#header .gnb .depth2 > li:hover ul {
		display: block;
	}
	#header .gnb .depth2 ul li {
		border-top: 1px solid rgba(76,76,76,.7);
	}
	#header .gnb .depth2 ul li:hover {
		background: rgba(6,6,6,.7);
	}

	.btn-all-menu {position:absolute; top:38px; left:50%; width:32px; height:25px; border:1px solid #cecece; margin-left: 487px; cursor:pointer;}
	.btn-all-menu span {position:absolute; left:50%; margin-left: -10px; width:20px; height:2px; background: #ababab;}
	.btn-all-menu span:nth-child(1) {top:5px;}
	.btn-all-menu span:nth-child(2) {top:50%; margin-top:-1px;}
	.btn-all-menu span:nth-child(3) {bottom:5px;}

	.all-menu-wrap {display:none; position:fixed; top:0; left:0; z-index:999999999; width:100%; height:100%; background:rgba(0,0,0,.85);}
	.all-menu-wrap > ul {position:absolute; top:60px; left:50%; transform:translateX(-50%); padding:30px 30px 50px; width:960px; background:#fff; font-size:0;}
	.all-menu-wrap > ul > li {display:inline-block; padding:0 30px; width:33.33333333333333%; vertical-align:top;}
	.all-menu-wrap > ul > li > a {display:block; margin-top: 20px; padding:10px; border-bottom:1px solid #222; font-size:22px; line-height:1.3; color:#222;}
	.all-menu-wrap > ul > li li a {display:block; padding:10px; border-bottom:1px solid #ddd; font-weight: 300; font-size:18px; line-height: 1.3;}
	.all-menu-wrap p {position:absolute; top:100px; left:50%; margin-left: 424px; cursor:pointer;}
	.all-menu-wrap p span {display:block; margin-top: 5px; font-size:0; width:30px; height:30px;}
	.all-menu-wrap p span:before {content:''; display:block; width:100%; height:1px; background:#666; transform:rotate(-45deg);}
	.all-menu-wrap p span:after {content:''; display:block; width:100%; height:1px; background:#666; transform:rotate(45deg);}
	
	#header .w-lang dd a:hover {color: rgba(255,255,255,.7);}
}
@media screen and (max-width:1200px) { 
	.btn-all-menu,
	.all-menu-wrap {display:none;}
	
	#header .w-lang {display: none;} 

	#header .m-menu-btn {display:block; position:absolute; top:24px; right:30px; width:42px; height:34px; z-index:9999; cursor:pointer;}
	#header .m-menu-btn span {height:6px; background:#fff; transition:.3s;}
	#header .m-menu-btn span:nth-child(1) {position:absolute; top:50%; margin-top:-3px; width:100%;}
	#header .m-menu-btn span:nth-child(2) {position:absolute; top:0; width:100%;}
	#header .m-menu-btn span:nth-child(3) {position:absolute; bottom:0; width:100%;}
	/* on */
	#header .m-menu-btn.on {z-index:100000;}
	#header .m-menu-btn.on span {background:#fff;}
	#header .m-menu-btn.on span:nth-child(1) {opacity:0;}
	#header .m-menu-btn.on span:nth-child(2) {height:2px; transform:translateY(16px) rotate(-45deg);}
	#header .m-menu-btn.on span:nth-child(3) {height:2px; transform:translateY(-16px) rotate(45deg);}

	#header .gnb {float:none; position:fixed; top:0; right:-100%; z-index:99999; width:100%; height:100vh; opacity:0; text-align:left;}
	#header .m-gnb-bg {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.8);}

	#header .m-lang {position:fixed; top:0; right:-100%; z-index:100000; padding:18px 0 0 33px; width:80%; height:80px; background:#003e7e; opacity:0; font-size:0;}
	#header .m-lang .w-lang {display: block;float: left;padding: 5px 0;}
	#header .m-lang .w-lang dd {margin-left: 0;margin-right: 10px;}
	#header .m-lang .w-lang dd a {font-size: 23px;text-align: center;}
	html[lang="ko"] #header .m-lang .w-lang dd.lang.ko a:after, html[lang="en"] #header .m-lang .w-lang dd.lang.en a:after, html[lang="zh"] #header .m-lang .w-lang dd.lang.zh a:after {bottom: 0;}
	/* on */

	#header .gnb > ul {overflow-x:hidden; position:absolute; top:80px; right:0; z-index:100000; width:80%; height:calc(100% - 80px); background:#fff;}
	/* depth */
	#header .gnb ul a {display:block; padding-left:36px; width:100%; line-height:1;}
	/* 1depth */
	#header .gnb > ul > li {width:100%;}
	#header .gnb > ul > li > a {position:relative; padding-top:20px; padding-bottom:20px; border-top:1px solid #ddd; font-size:23px; color:#333;}
	#header .gnb > ul > li > a:before {position:absolute; top:16px; right:30px; content:"\f107"; display:block; font-family:'FontAwesome'; font-size:30px; line-height:1;}
	#header .gnb > ul > li:first-child > a {border-top:0 none;}
	#header .gnb > ul > li:last-child > a {border-bottom:1px solid #ddd;}
	/* 2epth */
	#header .gnb > ul > li > ul {display:none;}
	#header .gnb > ul > li > ul,
	#header .gnb > ul > li > ul > li {width:100%; background:#e8e8e8;}
	#header .gnb > ul > li > ul > li a {padding-top:15px; padding-bottom:15px; border-top:1px solid #d1d1d1; font-size:17px;}
	#header .gnb > ul > li > ul > li:first-child > a {border-top:0 none;}
	/* on */
	#header .gnb > ul > li.on > a {background:#3f3f40; border-top:0 none; color:#fff;}
	#header .gnb > ul > li.on > a:before {content:'\f106';}
	
	#header .gnb > ul > li .depth2 > li > ul li a {font-weight: 400;}
	#header .gnb > ul > li .depth2 > li > ul li a:before {
		content: "-";
		display: inline-block;
		margin-right: 10px;
	}
}
@media screen and (max-width:767px) {
	#header .m-menu-btn {top:16px; right:20px; width:28px; height:23px;}
	#header .m-menu-btn span {height:3px;}
	#header .m-menu-btn span:nth-child(1) {top:10px; margin-top:auto;}
	#header .m-menu-btn.on span:nth-child(2) {height:2px; transform:translateY(10.5px) rotate(-45deg);}
	#header .m-menu-btn.on span:nth-child(3) {height:2px; transform:translateY(-10.5px) rotate(45deg);}

	#header .gnb > ul {top:55px; height:calc(100% - 55px);}
	#header .gnb ul a {padding-left:20px;}
	#header .gnb > ul > li > a:before {top:12px; right:20px; font-size:23px;}

	#header .m-lang {padding:12px 0 0 20px; height:55px;}
	#header .m-lang .w-lang {padding: 7px 0;}
	#header .m-lang .w-lang dd a {font-size: 13px;}

	#header .gnb > ul > li > a {padding-top:16px; padding-bottom:16px; font-size:17px;}
	#header .gnb > ul > li > ul > li a {padding-top: 12px; padding-bottom:12px; font-size:17px;}
}

/*
	footer
*/
#footer {position: relative;width:100%; background:#1d1d1d;}
#footer .footer-top {width:100%; background:#f1f1f1;}
#footer .footer-top dl {margin:0 auto; width:1200px;}
#footer .footer-top dd {display:inline-block; margin-right:25px;}
#footer .footer-top dd a {display:block; font-size:15px; line-height:40px;}
#footer .footer-bottom {position:relative; margin:0 auto; padding:35px 0 20px; max-width:1200px; font-size:0;overflow: hidden;}
#footer .footer-bottom p {display:inline-block; margin-right:47px; vertical-align:middle;}
#footer .footer-bottom address {display:inline-block;font-size:15px; line-height:1.3; vertical-align:middle; color:#666666; font-family: 'Noto Sans KR', sans-serif;}
ul.footer-bottom-link {font-size: 0;}
ul.footer-bottom-link li {position: relative;display: inline-block;margin: 0 10px;}
ul.footer-bottom-link li:before {content: "";position: absolute; width: 1px;height: 10px;background-color: #4e4e4e;top: 50%;left: -10px;margin-top: -5px;}
ul.footer-bottom-link li:first-child {margin-left: 0;}
ul.footer-bottom-link li:first-child:before {display: none;}
ul.footer-bottom-link li a {font-size: 16px;color: #fff;}
/* ul.footer-bottom-link li a:hover {font-weight: 700;} */
#footer .footer-bottom address .copy {display:block;}
#footer .footer-bottom address .m-copy,
#footer .footer-bottom address .m-email {display:none;}
#footer .footer-bottom address span {display:block; margin-bottom: 7px; font-weight:400; color:#666; word-break:keep-all;font-size: 15px;line-height: 1.5; border-bottom:1px solid #464646; padding: 0px 20px 10px 20px; }
#footer .footer-bottom address span.footer-copy {color: #3d3c3c; border-bottom:0px; font-size:13px;}
#footer .footer-bottom dl {float:right;}
#footer .footer-bottom dt {font-weight: 400; font-size:14px; line-height: 1.3; color:#ccc;}
#footer .footer-bottom dd {margin-top: 5px; font-weight: 700; font-size:30px; line-height: 1.3; font-family: 'Noto Sans KR'; color:#ccc; letter-spacing:-1px;}

.footer-right {
	float: right;
}
.footer-link {
	font-size: 0;
	text-align: center;
}
.footer-link li {
	display: inline-block;
    padding: 3px 0;
}
.footer-link li a {
	display: block;
    font-size: 12px;
    color: #dfdfdf;
    line-height: 1;
    padding: 2px 10px;
}
.footer-link li:first-child a {
    border-right: 1px solid #444;
	padding-left: 0;
}
.footer-link li.footer-admin {
    background-color: #41527c;
}
.footer-link li.footer-admin a {}
.footer-family {
	max-width: 168px;
    margin: 20px auto;
}
.footer-family > li {
	position: relative;
    background-color: #666;
    border: 1px solid #ccc;
	cursor: default;
}
.footer-family > li > span {
	display: block;
    font-size: 13px;
    color: #ccc;
    padding: 10px 30px 10px 20px;
    line-height: 1;
}
.footer-family > li > span:after {
    content: "\f0d7";
    position: absolute;
    top: 50%;
    right: 15px;
    margin-top: -9px;
    font-family: 'FontAwesome';
    font-size: 18px;
}
.footer-family-depth2 {
	display: none;
	position: absolute;
    bottom: 100%;
    right: -1px;
    left: -1px;
    margin-bottom: 1px;
}
.footer-family > li:hover .footer-family-depth2 {display: block;}
.footer-family-depth2 li {
	background-color: #fff;
    border: 1px solid #eaeaea;
    border-bottom: 0;
}
.footer-family-depth2 li a {
	display: block;
    font-size: 13px;
    color: #666;
    padding: 10px 20px;
    line-height: 1;
}

@media screen and (min-width: 1201px) {
	ul.footer-bottom-link li a:hover {color: rgba(255,255,255,.7);}
	.footer-link li a:hover {color: #fff;}
	.footer-family-depth2 li:hover {background-color: #f3f3f3;}
}
@media screen and (max-width:1200px) { 
	#footer .footer-bottom {padding:40px 30px; width:100%;}	 
}
@media screen and (max-width:1100px) { 
	#footer .footer-bottom dl {text-align:right;}	 
}
@media screen and (max-width:767px) {  
	#footer .footer-bottom address span {font-size: 15px;}
	#footer .footer-bottom p {margin-right: 0; display:block; text-align:center;}	
	#footer .footer-bottom p img {display:inline-block;}
	ul.footer-bottom-link {text-align: center;}
	#footer .footer-bottom address {margin-top: 20px; width:100%; text-align:center;}
	#footer .footer-bottom dl {float:none; display:block; margin-top: 30px; text-align:center;}
	.footer-right {float: none;margin-top: 20px;}
}

/* ---------------------------------- contents */
#contents {position: relative; overflow: hidden;}

@media screen and (min-width:1201px) {
	#contents {min-height:calc(100vh - 255px);}
}
@media screen and (max-width: 1200px) {
	
}
@media screen and (max-width:767px) {
	#contents {min-height:calc(100vh - 288px);}
}

.top-btn {position:fixed; z-index:9999; bottom:30px; right:30px; width:50px; height:50px; background:#0a4dc7; font-size:16.5px;  font-weight:600;line-height:50px; color:#fff; text-align:center; cursor:pointer;display: none; border-radius: 100%; padding-top: 1px;}
.top-btn.on {
	position: absolute;
    bottom: auto;
    top: -80px;
}
@media screen and (min-width: 1201px) {
	.top-btn:hover {
		background:#666;
	}
}