@charset "utf-8";
/* ----------
css
---------- */

/* ===================================
	공통클래스
 =================================== */
body { background-color:#fff;  min-width:130d0px; margin:0px auto; }
button{cursor:pointer; padding:0; margin:0px;}
input[type="button"]{cursor:pointer;}
/*#wrap {overflow:hidden; width:100%; } */ /* min-width 홈페이지 컨텐츠 가로값에 맞게 변경 */
.area{ width:1300px; 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}

.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}

table {width:100%;table-layout:fixed;}
.material-icons{vertical-align:middle;}



#header {position:absolute; top:0px; left:0px; width:100%;  background-color:#000; background-color:rgba(0,0,0,0.5); z-index:1001; min-width:1200px; }
#headerInner{position:relative; width:100%; max-width:1200px; margin:0px auto;}
#headerInner .logo{position:absolute; top:0; left:1%; z-index:9991; }
#headerInner .logo a {display:block; margin-top:25px; width:300px; height:50px;  line-height:50px; background:url(/images/common/logo_mark.png) no-repeat 0 50%; color:#fff; background-size:45px auto ; padding-left:50px; font-size:20px;font-weight:bold;}
#header .fixed .logo a img {display:none;  }


/* 헤더 :: GNB */
#gnb{height:106px; margin-left:50px;}
#gnb > ul{text-align:center;}
#gnb > ul > li{position:relative; display:inline-block; width:130px; margin-left:-4px; }
#gnb > ul > li:first-child{margin-left:0;}
#gnb > ul > li > a{display:block; height:106px; padding:0 15px; -webkit-transition:all 400ms;-moz-transition:all 400ms;-o-transition:all 400ms;-ms-transition:all 400ms;transition:all 400ms; font-weight:bold;}
#gnb > ul > li > a:hover,#gnb > ul > li.on > a{background-color:#024583;}
#gnb > ul > li > a > span{display:block; height:104px; line-height:104px; letter-spacing:-0.75px; font-size:18px; border-bottom:2px solid transparent; color:#fff;}
#gnb > ul > li > a:hover > span,#gnb > ul > li.on > a > span{border-bottom-color:#fff; color:#fff !important;}
#gnb > ul > li .gnb-2dep{display:none; position:absolute; top:106px; left:0px; width:100%; padding:11px 0 20px;text-align:left; background-color:#024583;}
#gnb > ul > li .gnb-2dep li a{display:block; padding:5px 16px; color:#fff; font-size:15px; font-weight:bold; letter-spacing:-0.25px; -webkit-transition:all 400ms;-moz-transition:all 400ms;-o-transition:all 400ms;-ms-transition:all 400ms;transition:all 400ms}
#gnb > ul > li .gnb-2dep li a:hover {color:#ebfe1d; }

#gnb > ul > li .gnb-3dep li a {font-size:0.9em; opacity:0.8;  padding-top:0px; padding-bottom:0px; }
#gnb > ul > li .gnb-3dep li a:before {content:"-  "; }
#gnb > ul > li .gnb-3dep li a:hover {color:#ebfe1d; }
#gnb > ul > li .gnb-3dep li:last-child {padding-bottom:10px; }

gnb >


/* 헤더 :: Util 메뉴 */
#utilMenu{position:absolute; top:0; right:1%; padding-top:44px; text-align:right;}
#utilMenu a{color:#5d6071; }
#utilMenu > div{display:inline-block;}
.user-menu-list a{opacity:0.7;filter:Alpha(opacity=70); font-size:13px;}
.user-menu-list a:first-child{margin-right:15px;}
.user-menu-list a:hover{opacity:1.0;filter:Alpha(opacity=100);}


/* ========푸터 ======== */
#footer{position:relative; padding:50px 20px;border-top:1px solid #d1d1d1;  text-align:left; background-color:#f7f7f7;width:100%;margin:0 auto;}
.index #footer{border-top-color:transparent;}
#footerInner {width:1200px; }
#footerInner .foot-logo{ display:block; margin-bottom:20px; ;}
#footerInner .footer-address div  {width:100%;}
#footerInner .footer-address div dl {line-height:24px; font-weight:300; font-size:13px; color:#707070; display:inline-block; }
#footerInner .footer-address dt,#footerInner .footer-address dd{display:inline-block;}
#footerInner .footer-address dd{margin-right:10px;}
#footerInner address{clear:both; opacity:0.7; margin-top:7px;}
.bottom-to-top-btnm{position:absolute; left:50%; margin-left:-15px; bottom:0px; background-color:#979797; width:40px; height:40px; line-height:40px; display:block;text-align:center;}





/* ===================================
	애니메이션효과
 =================================== */
@-webkit-keyframes inFromRight {
	from {
		opacity: 0;
		-webkit-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}
@-webkit-keyframes inFromLeft {
	from {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	to {
		opacity: 0;
		-webkit-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0);
	}
}