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

/* ===================================
	공통클래스
 =================================== */
body { background-color:#fff; }
button{cursor:pointer; padding:0; margin:0px;}
input[type="button"]{cursor:pointer;}
#wrap {overflow:hidden; width:100%; } /* min-width 홈페이지 컨텐츠 가로값에 맞게 변경 */
.area{ width:1400px; margin:0px auto; } /* width 홈페이지 컨텐츠 가로값에 맞게 변경 */
.area2{ width:850px; margin:0px auto; }
.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:fixed; top:0px; left:0px; width:100%;  background-color:#fff; /* background-color:#06599e;*background-color:rgba(0,0,0,0.5);*/ z-index:999;}
#headerInner{position:relative; width:100%; max-width:1750px; width:100%; margin:0px auto;}
#headerInner .logo{position:absolute; top:0; left:1%; z-index:1; }
#headerInner .logo a{display:block; margin-top:16px; width:100px; height:80px; background:url(../images/common/fixed_logo.png) no-repeat; font-size:0; }


/* 헤더 :: GNB */
#gnb{height:96px; }
#gnb > ul{text-align:center; padding-left:70px;}
#gnb > ul > li{position:relative; display:inline-block; width:32.5%; margin-left:0px; }
#gnb > ul > li:first-child{margin-left:0;}
#gnb > ul > li > a{display:block; height:96px; padding:0 15px; -webkit-transition:all 400ms;-moz-transition:all 400ms;-o-transition:all 400ms;-ms-transition:all 400ms;transition:all 400ms}
#gnb > ul > li > a:hover,#gnb > ul > li.on > a{ background: linear-gradient(to right,#0061bb,#0084bb);}
#gnb > ul > li > a > span{display:block; height:94px; line-height:94px; letter-spacing:-0.75px; font-size:20px; border-bottom:2px solid transparent; color:#222;}
#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:96px; left:0px; width:100%; padding:11px 0 20px;text-align:left;  background: linear-gradient(to right,#0061bb,#0084bb);}
#gnb > ul > li .gnb-2dep li a{display:block; padding:5px 26px; color:#fff; font-size:16px; font-weight:300; 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; }


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


/*  헤더 :: GNB MOBILE */ 
.gnb-open-btn{position:absolute; top:50%; right:2%; visibility:hidden; opacity:0;filter:Alpha(opacity=0); transform:translateX(100%); -moz-transform:translateX(100%);}
#gnbM{/* width:86%; */ width:240px; height:100%; position:fixed; top:0px; right:-100%; max-width:550px; background-color:#0061bb; z-index:99999; overflow-y:auto;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;-ms-transition:all 0.5s;transition:all 0.5s}
#gnbM.open{right:0px;}
.close-box{cursor:pointer; display:block; height:84px; line-height:84px; padding:0 5%; border-bottom:1px solid #0061bb; text-align:right;}
#gnbNavigation > ul{width:100%; overflow:hidden;}
#gnbNavigation > ul > li{position:relative; width:100%; border-bottom:1px solid #0061bb; }
#gnbM.open  #gnbNavigation> ul > li{animation: inFromRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1);}
#gnbNavigation > ul > li > a{position:relative; display:block;  height:45px; line-height:45px; padding:0 7%; color:#fff; font-size:15px; font-weight:400; letter-spacing:-0.25px;}
#gnbNavigation > ul > li .gnb-2dep{display:none; padding:13px 0; background-color:#1d242a}
#gnbNavigation > ul > li .gnb-2dep li{}
#gnbNavigation > ul > li .gnb-2dep li a{display:block; color:#fff; font-size:14px; padding:8px 7%;}
#gnbNavigation > ul > li .gnb-2dep li a:hover{color:#68e9f5}
#gnbMenuBg{display:none; position:fixed; top:0px; left:0px; width:100%; height:100%; cursor:pointer; background-color:#000; background-color:rgba(0,0,0,0.83); z-index:99998}


/* FIXED STYLE */
#header.fixed{background-color:#fff; border-bottom:2px solid #083f8a}
#header.fixed #headerInner .logo a {background: url("../images/common/fixed_logo.png") no-repeat 0 0 ; }
#header.fixed #gnb > ul > li > a > span{color:#2c2c2c}
#header.fixed #utilMenu a{color:#2c2c2c;}
#header.fixed .user-lang-select a:hover,#header.fixed .user-lang-select a.on{border-bottom-color:#c61928;}


/* ========푸터 ======== */
#footer{position:relative; padding:30px 0 80px 0;  text-align:center; background-color:#000000; z-index:10;}
.index #footer{border-top-color:transparent;}
#footerInner .foot-logo{ display:block; margin-bottom:20px; opacity:0.5; }
#footerInner  ul {border-bottom:1px solid rgba(256,256,256,0.2); padding-bottom:30px; margin-bottom:30px; text-align:Center;}
#footerInner  ul li {display:inline-block; margin:0 10px; }
#footerInner  ul li a {color:#eeeeee; opacity:0.6; line-height:1.5em;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;-ms-transition:all 0.5s;transition:all 0.5s}
#footerInner  ul li a:hover {color:#eeeeee; opacity:1; ;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;-ms-transition:all 0.5s;transition:all 0.5s}
#footerInner .footer-address p {color:#a2a2a2; }
#footerInner .footer-address div  {width:100%; }
#footerInner .footer-address div dl {line-height:24px; font-weight:400; font-size:15px; color:#9e9fa7; 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; margin-top:7px; color:#707070;}
#footerInner address a { color:#fff; opacity:0.8;}
.bottom-to-top-btn{position:absolute; left:50%; margin-left:-15px; bottom:0px; background-color:#979797; width:40px; height:40px; line-height:40px; display:block;}



@media all and (max-width:1400px){
	.area{width:100%;}
}

@media all and (max-width:1024px){
	/* -------- 헤더 -------- */
	#headerInner .logo a{margin-top:25px; height:40px; background-size:auto 40px;}
	#utilMenu > div{display:block;}
	#utilMenu > div.user-menu-list{width:180px;}
	#utilMenu > div.user-menu-list a{font-size:11px;}

	/* -------- 헤더 -------- */
	#headerInner{padding:0; height:60px;}
	#headerInner .logo{position:absolute; margin-left:2%; margin-top:15px;}
	#headerInner .logo a{margin:0; background:url(../images/common/logo_symbol.png) no-repeat; font-size:0;  background-size:contain;}
	#utilMenu  {right:100px; top:0px; padding-top:18px;}
	#gnb{display:none;}
	.gnb-open-btn{visibility:visible; opacity:1;filter:Alpha(opacity=100); margin-top:2px; transform:translateX(0); -moz-transform:translateX(0); margin-top:-20px;}
	.gnb-open-btn i{font-size:48px; }

	/* FIXED STYLE */
	#header.fixed{top:-0px;}
	#header.fixed .gnb-open-btn i{color:#2c2c2c;}
	#header.fixed #headerInner .logo a { background-size:auto 40px;}

	/* -------- 푸터 -------- */
	#footer{position:relative; padding:30px 0 0 0;border-top:1px solid #d1d1d1;  text-align:center;}
	#footerInner .foot-logo img {width:120px;}
	#footerInner .footer-address,#footerInner .footer-address dl{float:none; width:96%; margin:0 auto; text-align:center; font-size:13px; line-height:18px;}
	#footerInner .footer-address{margin:20px auto;}
	#footerInner .footer-address dd{margin-right:0;}
	#footerInner address{margin-top:15px;}
	.bottom-to-top-btn{position:static; margin:0px auto;}
	.index .bottom-to-top-btn{display:block;}
}



@media all and (max-width:768px){
	/* -------- 헤더 -------- */
	#headerInner .logo a {margin-top:0; height:34px; background-size:auto 100% !important;}
	.gnb-open-btn i{font-size:38px; color:#222;}
}

	
@media all and (max-width:640px){
	/* -------- 헤더 -------- */
	#headerInner{height:40px;}
	#headerInner .logo{position:absolute; margin-left:2%; margin-top:5px;}
	#headerInner .logo a{ height:28px; background-size:auto 100% !important;}

	#utilMenu{height:22px; right:60px; top:0; padding-top:8px;}
	#utilMenu > div a{font-size:12px !important;}
	#utilMenu > div.user-menu-list a{line-height:22px}
	.user-lang-select a{border-bottom-width:1px}
	.gnb-open-btn i{font-size:28px; margin-top:7px;}

}






/* ===================================
	애니메이션효과
 =================================== */
@-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);
	}
}