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

@import url('http://fonts.googleapis.com/earlyaccess/notosanskr.css');
@import url('http://fonts.googleapis.com/earlyaccess/nanumgothic.css');
@import url('http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css');
@import url('https://fonts.googleapis.com/css?family=PT+Serif');
@import url('//cdn.jsdelivr.net/nanumsquare/1.0/nanumsquare.css');
@import url('https://fonts.googleapis.com/css?family=Libre+Baskerville');
@import url('https://fonts.googleapis.com/css?family=EB+Garamond');
@import url('https://fonts.googleapis.com/css?family=lato');


/*{font-family:'Noto Sans KR',Nanum Gothic,Dotum,돋움,Tahoma,Geneva,sans-serif;}*/
/* layout
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, p, dl, dt, dd, ol, ul, li, fieldset, form, label, legend
{box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; margin: 0; padding: 0; border: 0; vertical-align: baseline; word-wrap:break-word;word-break:keep-all;
}
html {-webkit-text-size-adjust: 100%;} */
html, body {width:100%; -word-break:break-all;-ms-word-break:break-all; /* text-align:center; */ margin:0 auto;}
select, input, textarea, button { vertical-align: middle; color:rgba(85, 85, 85, 0.64);}
h1, h2, h3, h4, h5, h6 {font-size: 100%;font-weight: normal;}
a{color:#525252;text-decoration:none;word-break:break-all;}
a:link,a:visited,a:hover,a:active,a:focus{text-decoration:none;}
input {padding: 0;margin: 0;}
table {border-collapse: collapse;border-spacing: 0;vertical-align: top;}
table th { font-size:1.0em;}
img,fieldset {border:0px;}
ol, ul {list-style: none;}
legend, caption {width: 0; height: 0; overflow: hidden; visibility: hidden; font-size: 0; line-height: 0;}
em {font-style:normal;}
img {max-width:100%;}



/* =============================================================================================
	                                                      공통
 ================================================================================================ */

#wrap {overflow:hidden; width:100%; background:#fff} /* min-width 홈페이지 컨텐츠 가로값에 맞게 변경 */
.area{ max-width:1200px; margin:0px auto; } /* width 홈페이지 컨텐츠 가로값에 맞게 변경 */
.clearfix{*zoom:1;}
.clearfix:after{clear:both; display:block; content:"";}
.fi400{-webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s}

/* =================================================================================================
		                                           상단
 ================================================================================================= */
#header{position:absolute; top:0px; left:0px; width:100%; border-bottom:1px solid rgba(255,255,255,0.2); z-index:999; height:85px; background-color:rgba(0,0,0,0.2); }
#headerInner{position:relative; width:100%; max-width:1200px; margin:0px auto;}
#headerInner .logo{position:absolute; top:0; left:0; z-index:1; }
#headerInner .logo a{display:block; margin-top:0px;  font-size:0;}

/* 헤더 :: GNB */
#gnb{height:85px; }
#gnb > ul{text-align:right;}
#gnb > ul > li{position:relative; display:inline-block; width:130px; margin-left:-4px; text-align:center}
#gnb > ul > li:first-child{margin-left:0;}
#gnb > ul > li > a{display:block; height:85px; padding:0 0px;
	-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-color:rgba(0,0,0,0.8);}
#gnb > ul > li > a > span{display:block; height:85px; line-height:85px;  font-size:18px; font-family:'Noto Sans KR',sans-serif; border-bottom:2px solid transparent; color:#fff; font-weight:400}
#gnb > ul > li > a:hover > span,#gnb > ul > li.on > a > span{border-bottom-color:#0f466a; color:#fff !important;}
#gnb > ul > li .gnb-2dep{display:none; position:absolute; top:85px; left:0px; width:100%; padding:11px 0 20px;text-align:center; background-color:rgba(0,0,0,0.8);}
#gnb > ul > li .gnb-2dep li a{display:block; padding:3px 15px; color:#fff; font-size:15px; font-weight:300; letter-spacing:-0.55px;}




/*
#header.fixed{background-color:rgba(0,0,0,0.7); border-bottom:1px solid #000}
#header.fixed #headerInner .logo a{ color:#fff}
#header.fixed #gnb > ul > li > a > span{color:#fff}
*/


#utilMenu{position:absolute; top:0; right:-4%; padding-top:31px; text-align:right;}
#utilMenu > div{display:inline-block;}
.user-menu-list a{opacity:0.7;filter:Alpha(opacity=70);}
.user-menu-list a:hover{opacity:1.0;filter:Alpha(opacity=100);}

/*  GNB MOBILE */ 
.gnb-open-btn{position:absolute; top:0; right:2%; padding-top:31px; visibility:hidden; opacity:0;filter:Alpha(opacity=0); transform:translateX(100%); -moz-transform:translateX(100%); display:none}
.gnb-online{position:absolute; top:0; right:7%; padding-top:28px; visibility:hidden; opacity:0;filter:Alpha(opacity=0); transform:translateX(100%); -moz-transform:translateX(100%); display:none}

#gnbM{/* width:86%; */ width:240px; height:100%; position:fixed; top:0px; right:-100%; max-width:550px; background-color:#0f466a; z-index:999999999; 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:65px; line-height:80px; padding:0 5%; border-bottom:1px solid rgba(255,255,255,0.3); text-align:right;}
#gnbNavigation > ul{width:100%; overflow:hidden; z-index:999999999999;}
#gnbNavigation > ul > li{position:relative; width:100%; border-bottom:1px solid rgba(255,255,255,0.3); z-index:999999999999;}
#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:48px; line-height:48px; padding:0 7%; color:#fff; font-size:17px; font-weight:400; letter-spacing:-0.25px;}
#gnbNavigation > ul > li .gnb-2dep{display:none; padding:13px 0; background-color:#353535}
#gnbNavigation > ul > li .gnb-2dep li{}
#gnbNavigation > ul > li .gnb-2dep li a{display:block; color:rgba(255,255,255,0.5); font-size:16px; padding:2% 7%;}
#gnbNavigation > ul > li .gnb-2dep li a:hover{color:rgba(255,255,255,1)}
#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}


@media all and (max-width:1400px){
	/* -------- 헤더 -------- */
	#utilMenu > div{display:block;}
	#utilMenu > div.user-menu-list{position:absolute; right:0px;}
	#utilMenu > div.user-menu-list a{font-size:11px;}
}
@media all and (max-width:1220px){
	.area{width:100%;}
	/* -------- 헤더 -------- */
	#headerInner{padding:60px 0 0 0;}
	#headerInner .logo{margin-left:2%;}

	#utilMenu{top:0px; right:auto; overflow:hidden; width:96%; height:30px; left:0px; padding:10px 0;}
	#utilMenu > div.user-menu-list{float:left; position:static; width:auto;}
	#utilMenu > div.user-menu-list a{font-size:18px; line-height:30px; }
	#utilMenu > div.user-menu-list a:first-child{display:none;}
	#utilMenu > div.user-lang-select{float:right;}
	#gnb{display:none;}
	.gnb-open-btn{visibility:visible; opacity:1;filter:Alpha(opacity=100); margin-top:2px; transform:translateX(0); -moz-transform:translateX(0); display:block}
	.gnb-open-btn i{font-size:48px; color:#fff;}
	.gnb-online{visibility:visible; opacity:1;filter:Alpha(opacity=100); margin-top:2px; transform:translateX(0); -moz-transform:translateX(0); display:block}
	
	/* FIXED STYLE */
	#header.fixed{}
	#header.fixed .gnb-open-btn i{color:#2c2c2c;}

}

@media all and (max-width:1024px){
    #header{display:none}
}
	
@media all and (max-width:640px){
	/* -------- 헤더 -------- */
	#header{height:60px;}
	#headerInner{padding:52px 0 10px 0}	
	#headerInner .logo img{ max-width:45%}
	#utilMenu{height:22px;}
	#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{padding-top:18px;}
	.gnb-open-btn i{font-size:38px}
	.gnb-online{right:10%; padding-top:15px;  z-index:2;}
}

@media all and (max-width:480px){
	/* -------- 헤더 -------- */
	#header{height:60px;}
	#headerInner{padding:52px 0 10px 0}	
	#headerInner .logo img{ max-width:45%}
	#utilMenu{height:22px;}
	#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{padding-top:18px;}
	.gnb-open-btn i{font-size:38px}
	.gnb-online{right:12%; padding-top:15px;  z-index:2;}
}

/* =================================================================================================
		                                         모바일
 ================================================================================================= */

#mobile{display:none}
.m_btmenu {display:none}
.m_pop img{display:none}

@media all and (max-width:1024px){
    #mobile{display:block; width:100%; background:#12173a; padding:2% 2% 3%;}
    #mobile .m_top li:first-child{float:left; padding-left:1%}
    #mobile .m_top li:last-child{float:right; padding-left:1%}
    #mobile .m_menu{text-align:center; width:100%}
    #mobile .m_menu ul{display:inline-block; *display:inline; zoom:1;}
    #mobile .m_menu ul li{float:left; background:#4087d0; width:19%; font-size:20px; letter-spacing:-1px; color:#fff; font-family: "Noto Sans KR", sans-serif !important; font-weight:500; 
	   line-height:1.1; padding:6px 10px; margin:15px 0.5% 0; z-index:1; border-radius: 10px;}
    #mobile .m_menu ul li a{color:#fff; }
	#mobile .m_menu ul li img{width:100%}
	 #mobile .m_menu ul li:nth-child(3){*font-size:19px;}

    .m_btmenu {display:block; clear:both; font-family: 'Nanum Gothic', sans-serif; width:100%; background:#172f55 url(/web/mobile/menu_btm_bg.png-) repeat-x;/*포인트컬러*//*하단아이콘메뉴*/ text-align:center; overflow:hidden; }
    .m_btmenu li { float:left; width:33%; height:65px; }
    .m_btmenu li.line{ float:left; width:1px; background:#405982;/*세로라인*//*하단아이콘메뉴*/}
    .m_btmenu li a { display:block;  height:65px; color:#d1d5dd; background:url(../images/mobile/menu_btm_ico.png) no-repeat; padding-top:40px; font-size:13px; font-weight:600; *opacity:0.9}
    .m_btmenu li a.tab_m {}
    .m_btmenu li a.phone {background-position:center 3px;}/*left top*/
    .m_btmenu li a.sms {background-position:center -52px;}
    .m_btmenu li a.map {background-position:center -106px;}
    .m_btmenu li a.gourl {background-position:center -222px;}
    .m_btmenu li a.on { color:#f6f6f6; background:url(../mobile2012/images/menu_btm_bgon.png) repeat-x;}
    .m_btmenu li a:hover,
    .m_btmenu li a:active{color:#f5f812;}
    .m_pop img{display:block; width:100%}
}







/* =================================================================================================
		                                           하단
 ================================================================================================= */

.footer {text-align:left;background-color:#141414;padding: 3% 4% 1px 4%;color:#afadad !important;}
.footer a {color:#666 !important;}
.logoo {width:18%; float:left;}
.contact {width:40%;padding:0 2% 0 0;float:left; margin-left:10%}
.address {width:40%;float:left; margin-right:10%; font-size:14px; line-height:1.5}
.address .info a{font-size:10px;font-weight:200; color:#ccc}
.contact .tell a{font-size:28px;font-weight:600; color:#fff !important}
.contact .tell {font-size:28px;font-weight:600; color:#fff !important}
.contact .fbank {font-size:18px;font-weight:200; margin-top:1%}
.footer-title {font-size:16px; padding-bottom:10px;}

@media screen and (max-width: 1560px) {
   .contact {width:48%; padding:0 2% 0 0;float:left; margin-left:2%}
   .address {width:48%; float:left; margin-right:2%; font-size:14px; line-height:1.5}
}
@media screen and (max-width: 1024px) {
   .logoo{width:100%}
   .contact {width:100%; padding:0 0 0 0; margin-left:0%}
   .address {width:100%; margin-top:2%}
    .m_logoo {display:none}
    .footer-title {padding-top:20px}
}


/* =================================================================================
							              팝업
====================================================================================== */
#popup, #popup2, .bMulti {display: none;min-width:1200px;padding:0;}
#popup .logo{color:#2b91af;font:bold 325% 'Petrona',sans}
#popup, .bMulti {min-height: 250px;}
/* 클릭할 버튼 */
.button {cursor: pointer; display: inline-block; padding: 0; text-decoration: none;}
/* 닫기 버튼 */
.button.b-close, .button.bClose {position:absolute; right:0px; top:0px; z-index:999; padding:0;}







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