@charset "utf-8";
/* ****************** 공통클래스 ********************** */
.area{ width:100%; margin:0px auto;} /* width 홈페이지 컨텐츠 가로값에 맞게 변경 */
.clearfix{*zoom:1;}
.clearfix:after{clear:both; display:block; content:"";}
.blind{overflow:hidden;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0}
.text-ellipsis{overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.trans200{-webkit-transition:all 0.2s;-moz-transition:all 0.2s;-o-transition:all 0.2s;-ms-transition:all 0.2s;transition:all 0.2s}
.trans300{-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s}
.trans400{-webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s}
.trans500{-webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;-ms-transition:all 0.5s;transition:all 0.5s}
.material-icons{line-height:initial; color:inherit;}
.fl{float:left;}
.fr{float:right;}



/* ****************** 메인페이지 메뉴색상 ********************** */
.main_menu{color:#222!important;}
.main_menu a{color:#222!important;}
.main_menu a:hvoer{color:#222!important;}
.main_menu .codrops-header h1 span {color:#222!important; z-index:999;}

/* ****************** HEADER ********************** */
header{position:fixed; top:0; left:0; width:100%; z-index:99; height:100px; background:#fff}
#headerInner{position:relative; width:100%; height:100px; background:#fff}
#headerInner .header-box{position:relative; width:100%; height:100%; margin:0px auto; box-sizing:border-box; padding: 1em;}
#headerInner .header-box  h1 span{font-size: 1.5rem; color: #222; text-transform:uppercase; margin-left:0.5em; }
#headerInner .logo{position:absolute; top:em; left:1.5em; z-index:99; font-size: 1em;	margin: em auto 0 0;	}
#headerInner .logo img{ width:60px ; height:60px; }
#headerInner .fixed-logo{display:none; position:absolute; left:1.5em; top:em; z-index:99; font-size: 1em;	margin: em auto 0 0;	}
#headerInner .fixed_logo img{ width:60px; height:60px; z-index:99; }
#headerInner .util{position:absolute; top:1em; right:1em; z-index:99;}
#headerInner .util li{display:inline-block; vertical-align:middle; margin-left:30px;}
#headerInner .util li:first-child{margin-left:0;}
#headerInner .util li a{font-size:1em; color:#222;}

/* Header */
.codrops-header {
	padding:1em 2em ;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex: none;
	flex: none;
	position: relative;
	/*background:rgba(255,255,255,0.0);*/
	box-sizing:border-box;
	height:100px;
	background:#fff;
}

.codrops-header h1 {
	font-size: 1em;
	margin: -0.6em auto 0 0;
	padding-left: em;
	box-sizing:border-box;
	z-index:999
}
.codrops-header h1 img{
	width:auto;
	height:; width:90px; height:90px; 
}
.codrops-header h1 span {
	color: #222;
	margin-left:10px;
	height:;
	top:2em;
	display: inline-block;
	position:absolute;
	font-size:1.1em;
	text-transform:uppercase;
	color:#222;
	letter-spacing:0.2em;
	font-weight:;
}



/* -------- headerInner :: fixed -------- */
#headerInner.fixed{animation:HeaderFixed 0.7s; height:100px; /*background-color:#0078b2;*/}
@-webkit-keyframes HeaderFixed {
	from {
		top:-120px
	}
	to {
		top:0;
	}
}
@keyframes HeaderFixed {
	from {
		top:-120px
	}
	to {
		top:0;
	}
}
#headerInner.fixed .logo{display:none;}
#headerInner.fixed .fixed-logo{display:block;}
#headerInner.fixed .util{top:1em;}


@media all and (min-width:65em){
	/* ****************** HEADER ********************** */
	#headerInner{background:rgba(255,255,255,0.0);}
	#headerInner .logo{}
	#headerInner .util{display:none;}
		
}

@media all and (max-width:65em){
	/* ****************** HEADER ********************** */
	header{position:relative;height:80px; b}
	#headerInner{background:rgba(255,255,255,0); height:80px;}
	#headerInner.fixed{position:fixed; z-index:99; height:80px;}
		
	.codrops-header {
	padding: 0.5em ;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex: none;
	flex: none;
	position: relative;
	/*background:rgba(255,255,255,0.0);*/
	box-sizing:border-box;
	height:80px;
}
.codrops-header h1 {
	font-size: 0.8em;
	margin: 0em auto 0 0;
	padding-left: em;
	box-sizing:border-box;
}
.codrops-header h1 img{
	width:60px!important; height:60px!important 
}
.codrops-header h1 span {
	color: #222;
	margin-left:10px;
	height:;
	top:1.6em;
	display: inline-block;
	position:absolute;
	color:#222;
	letter-spacing:0.1em;
}
}

@media all and (max-width:45em){
		

}

@media screen and (max-height: 35em) {

}


/* ****************** GNB ********************** */
#gnbBg{position:fixed; top:0; left:0px; width:100%; margin:0 auto; height:100%; background-color:rgba(0,0,0,0.37); z-index:1000; display:none;}
#gnbPcBg{position:absolute; top:1em; left:0px; width:100%; height:0; background:#fff; z-index:1001;
	-webkit-transition:height 300ms ease-in-out;
	-moz-transition:height 300ms ease-in-out;
	-ms-transition:height 300ms ease-in-out;
	-o-transition:height 300ms ease-in-out;
	transition:height 300ms ease-in-out
}
#gnbPcBg.open{height:200px; border-bottom:0px solid #0078b2; border-bottom:1px solid rgba(0,0,0,0.2);}
#gnb{position:absolute; top:0.6em; left:0; width:100%; height:1em; text-align:center; }
#gnb ul.clearfix{/*width:950px;*/width:50%; height:100%; margin:0px auto; position:absolute; top:0; right:1em; text-align:right;}
#gnb ul.clearfix > li{/*float:left; width:12%;*/ display:inline-block; height:100%; padding:0 1em; text-align:center; position:relative;}
#gnb ul.clearfix > li > a{display:inline-block; font-size:1em; line-height:1.4; color:#222; letter-spacing:0.2em; position:relative; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; -o-transition:all 0.3s; -ms-transition:all 0.3s; transition:all 0.3s;  text-transform:uppercase; line-height:80px; }
#gnb ul.clearfix > li > a:before{position:absolute; content:""; bottom:0px; left:50%; width:0; height:3px; background-color:#222;
	-webkit-transition:all 0.3s; -moz-transition:all 0.3s; -o-transition:all 0.3s; -ms-transition:all 0.3s; transition:all 0.3s;
}
#gnb ul.clearfix > li > a:hover,#gnb ul.clearfix > li.on > a{color:#222;}
#gnb ul.clearfix > li > a:hover:before,#gnb ul.clearfix > li.on > a:before{width:100%; margin-left:-50%; display:none;}
#gnb .gnb-2dep{padding-top:25px; /*padding-left:30px;*/ 
	position:absolute; top:1em; left:0px; width:100%; /*height:220px;*/ height:0; z-index:0; z-index:99; overflow:hidden;
	-webkit-transition:height 300ms ease-in-out;
	-moz-transition:height 300ms ease-in-out;
	-ms-transition:height 300ms ease-in-out;
	-o-transition:height 300ms ease-in-out;
	transition:height 300ms ease-in-out
}
#gnb .gnb-2dep.open{height:170px; }
#gnb .gnb-2dep > li{text-align:center; margin-bottom:10px;}
#gnb .gnb-2dep > li > a{font-size:15px; line-height:35px; color:#222; position:relative; letter-spacing:-0.2px; }
#gnb .gnb-2dep > li > a span{display:inline-block; line-height:normal;}
#gnb .gnb-2dep > li:hover > a, #gnb .gnb-2dep > li:focus > a{border-bottom:1px solid #0078b2; color:#222;}



/* 20200519 내가 작업한 스타일[반응형] */
@media all and (min-width:65em){
	/* ****************** GNB ********************** 
	#gnb ul.clearfix{padding-left:1em;}*/
	
}

@media all and (max-width:65em){
	/* ****************** GNB ********************** */
	#gnb{display:none;}
	
}

@media all and (max-width:45em){
	/* ****************** GNB ********************** */
	#gnb{display:none;}
}

@media all and (max-width:35em){
	/* ****************** GNB ********************** */
	#gnb{display:none;}
}
/* 20200519 내가 작업한 스타일[반응형] */


/* -------- GNB :: fixed -------- */
#gnb.fixed{height:100px;}
#gnb.fixed ul.clearfix > li > a{line-height:90px;}
#gnb.fixed ul.clearfix > li > a:before{/*background-color:#222;*/}
#gnb.fixed ul.clearfix > li > a:hover,#gnb.fixed ul.clearfix > li.on > a{/*color:#222;*/}
#gnb.fixed #gnbPcBg{}
#gnb.fixed .gnb-2dep{}



/* ****************** 모바일 GNB ********************** */
#m-gnb{display:none; width:50%; height:100%; position:fixed; top:0; right:-50%; overflow-y:auto; background:rgba(255,255,255,1); z-index:1001; }
#m-gnb.open{right:0;}
#m-gnb #navigation{width:100%; height:100%; background-color:#fff; margin-top:3em;}
#m-gnb #navigation > li{width:100%; background-color:#fff;}
#m-gnb #navigation > li > a{display:block; padding:1em; font-size:1em; color:#3d3d3d !important; border-bottom:1px solid rgba(0,0,0,0.1); }
#m-gnb #navigation > li > a em{display:block; font-size:1em; line-height:1.4; font-weight:300;}
#m-gnb #navigation > li .gnb-2dep{width:100%; display:none; background-color:#f7f7f7; padding:3% 0; visibility:hidden}
#m-gnb #navigation > li .gnb-2dep > li .gnb-3dep{display:none; padding:0 13%;}
#m-gnb #navigation > li .gnb-2dep li > a{display:block; font-size:1em; padding:3% 23.5% 3% 15%; letter-spacing:-0.5px; color:#666; }
#m-gnb #navigation > li .gnb-2dep li > a:hover{color:#ef5350; }
#m-gnb #navigation > li .gnb-2dep li > a i{display:none;}
.m-util{display:none; position:absolute; top:1em; right:1em;}
.nav-open-btn{display:none; visibility:visible; opacity:1;filter:Alpha(opacity=100); transform:translateX(0); -moz-transform:translateX(0); position:absolute; z-index:1002; top:1em; right:1em; -webkit-transition:top 0.3s;-moz-transition:top 0.3s; -o-transition:top 0.3s; -ms-transition:top 0.3s; transition:top 0.3s;}
.nav-open-btn > span{display:block; width:30px; height:3px; margin:5px 0; background-color:#222; -webkit-transition:all 0.4s;-moz-transition:all 0.4s; -o-transition:all 0.4s; -ms-transition:all 0.4s; transition:all 0.4s;}
.nav-open-btn > span.line4{width:15px;}
.nav-open-btn.on{z-index:1002;}
.nav-open-btn.on > span{background-color:#818181; height:3px;}
.nav-open-btn.on > span.line1{-ms-transform:translateY(8px) rotate(45deg);-webkit-transform:translateY(8px) rotate(45deg);-moz-transform:translateY(8px) rotate(45deg);-o-transform:translateY(8px) rotate(45deg);transform:translateY(8px) rotate(45deg);}
.nav-open-btn.on > span.line2, .nav-open-btn.on > span.line4{display:none;}
.nav-open-btn.on > span.line3{-ms-transform:translateY(8px) rotate(-45deg);-webkit-transform:translateY(8px) rotate(-45deg);-moz-transform:translateY(8px) rotate(-45deg);-o-transform:translateY(8px) rotate(-45deg);transform:translateY(8px) rotate(-45deg); margin-top:-8px;}


/* 20200519 내가 작업한 스타일[반응형] */
@media all and (max-width:65em){
	/* ****************** 모바일 GNB ********************** */
	#m-gnb{display:; }
	.nav-open-btn{display:block;}
	#headerInner.fixed .nav-open-btn{top:1em;}
	#headerInner.fixed #m-gnb #navigation{}
}

@media all and (max-width:45em){
	/* ****************** 모바일 GNB ********************** */
	.nav-open-btn{/*top:26px;*/top:1em;}
	#headerInner.fixed .nav-open-btn{top:1em;}
	#m-gnb #navigation{}
	#headerInner.fixed #m-gnb #navigation{/*margin-top:73px;*/}
}

@media all and (max-width:35em){
	/* ****************** 모바일 GNB ********************** */
}
/* 20200519 내가 작업한 스타일[반응형] */