@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 홈페이지 컨텐츠 가로값에 맞게 변경 */
.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%;   z-index:1001; border-bottom:1px solid rgba(256,256,256,0.2); }
#headerInner{position:relative; width:100%; width:100%; margin:0px auto; }
#headerInner .logo{position:absolute; top:16px; left:100px; z-index:1; }
#headerInner .logo a {display:block; width:177px; height:46px; background:url(../images/common/logo.png) no-repeat; font-size:0; }
#header.fixed .logo a img {display:none;  }


/* 헤더 :: GNB */
#gnb {padding-left:100px; height:80px; }
#gnb > ul{text-align:center;}
#gnb > ul > li{position:relative; display:inline-block; width:190px; margin-left:-4px; }
#gnb > ul > li:first-child{margin-left:0;}
#gnb > ul > li > a{display:block; height:80px; 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-color:#b50b1a;}
#gnb > ul > li > a > span{display:block; height:78px; line-height:78px; 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:80px; left:0px; width:100%; padding:11px 0 20px;text-align:left; background-color:#b50b1a;}
#gnb > ul > li .gnb-2dep li a{display:block; padding:5px 16px; color:#fff; font-size:15px; 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; }
#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; }



/* 헤더 :: Util 메뉴 */
#utilMenu{position:absolute; top:0; right:1%; padding-top:28px; text-align:right;}
#utilMenu a{color:#fff; }
#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);}


/*  헤더 :: GNB MOBILE */ 
.gnb-open-btn {position:absolute; top:0; left:0; width:80px; height:80px;  display:block; background-color:#c90000; visibility:visible; text-align:Center;}
.gnb-open-btn  i {color:#fff; line-height:80px; font-size:42px; }

#gnbM{width:100%;  height:100%; position:fixed; top:0px; left:-100%;  background-color:#c61928; 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{left:0px;}
.close-box{cursor:pointer; display:block; height:114px; line-height:114px; padding:0 5%; border-bottom:0px solid rgba(0,0,0,0.2); text-align:center;}

#gnbNavigation > ul {width:80%; overflow:hidden; padding:0 10%; }
#gnbNavigation > ul > li{position:relative; width:25%;  float:left;}
#gnbM.open  #gnbNavigation> ul > li{animation: inFromRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1);}
#gnbNavigation > ul > li > a {text-align:Center; position:relative; display:block;  height:58px; line-height:58px; padding:0 7%; color:#fff; font-size:20px; font-weight:400; letter-spacing:-0.25px; border-bottom:1px solid rgba(0,0,0,0.2); border-top:1px solid rgba(0,0,0,0.2);}
#gnbNavigation > ul > li .gnb-2dep{display:block; padding:13px 0; }
#gnbNavigation > ul > li .gnb-2dep li{}
#gnbNavigation > ul > li .gnb-2dep li a{display:block; color:#fff; font-size:14px; padding:6px 7%; text-align:Center;}
#gnbNavigation > ul > li .gnb-2dep li a:hover{color:#ffec15}
#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 #c61928}
#header.fixed #headerInner .logo a {background: url("../images/common/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:50px 0;   background-color:#1e1e1e;}
.index #footer{border-top-color:transparent;}
#footerInner .footer-address  {position:relative; width:100%; color:#888888;  /*background: url("../images/common/btn_logos.jpg") no-repeat right top ;min-height:120px; */}
#footerInner .footer-address p  {color:#888888; float:left; }
#footerInner .footer-address  a {color:#999;}
#footerInner address {position:absolute; right:0px; top:0; opacity:0.7; margin-top:7px; color:#888888;  /*padding-top:100px;*/}
.bottom-to-top-btn {position:absolute; left:50%; margin-left:-15px; bottom:0px; background-color:#323232; width:40px; height:40px; line-height:40px; display:block; vertical-align:middle;  text-align:center;}

@media all and (max-width:1420px){
	.area{width:96%; margin:0 2%;}

	/* -------- 헤더 -------- */
	#utilMenu > div{display:block;}
	#utilMenu > div.user-menu-list{width:150px;}
	#utilMenu > div.user-menu-list a{font-size:11px;}
}


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

	/* -------- 헤더 -------- */
	#headerInner{padding:10px 0;}
	#headerInner .logo{position:static; margin-left:78px;}
	#headerInner .logo a {margin:0; height:48px; background:url(../images/common/logo.png) no-repeat 0 center; background-size:auto 26px; font-size:0; }
	#header.fixed #headerInner .logo a {background: url("../images/common/logo.png") no-repeat 0 center ;  background-size:auto 26px; font-size:0; }

	#utilMenu  {right:20px; top:10px; padding-top:10px;}
	#gnb{display:none;}
	.gnb-open-btn{visibility:visible; opacity:1;filter:Alpha(opacity=100);  transform:translateX(0); -moz-transform:translateX(0); height:68px; width:68px;}
	.gnb-open-btn i{font-size:48px; color:#fff; line-height:66px;}
	/* FIXED STYLE */
	#header.fixed{top:-0px;}
	/*#header.fixed .gnb-open-btn i{color:#2c2c2c;}*/


		/*  헤더 :: GNB MOBILE */ 
	.gnb-open-btn {position:absolute; top:0; left:0; width:68px; height:68px;  display:block; background-color:#c90000; visibility:visible; text-align:Center;}
	.gnb-open-btn  i {color:#fff; line-height:68px; font-size:42px; }

	#gnbM{width:70%;  height:100%; position:fixed; top:0px; left:-100%; max-width:450px; background-color:#c61928; 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{left:0px;}
	.close-box{cursor:pointer; display:block; height:64px; line-height:64px; padding:0 5%; border-bottom:1px solid rgba(0,0,0,0.2); text-align:right;}
	.close-box img {width:30px;}
	#gnbNavigation > ul{width:100%; overflow:hidden; padding:0px;}
	#gnbNavigation > ul > li{position:relative; width:100%; border-bottom:1px solid rgba(0,0,0,0.2); }
	#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:16px; font-weight:400; letter-spacing:-0.25px;  border-bottom:0px solid rgba(0,0,0,0.2); border-top:0px solid rgba(0,0,0,0.2); text-align:left;}
	#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:6px 7%;text-align:left;}
	#gnbNavigation > ul > li .gnb-2dep li a:hover{color:#e64f56}
	#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}


	/* -------- 푸터 -------- */
	#footer{position:relative; padding:20px 0 0 0; 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:11px; line-height:18px;}
	#footerInner .footer-address {margin:20px auto; position:relative; width:94%; color:#888888;}
	#footerInner .footer-address p  {color:#888888; float:none; }
	#footerInner address {position:relative; right:0px; top:0; opacity:0.7; margin-top:7px; color:#888888; }


	#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{padding:10px 0;}
	#headerInner .logo{position:static; margin-left:58px;}
	#headerInner .logo a {margin:0; height:26px; background:url(../images/common/logo.png) no-repeat 0 center; background-size:auto 20px; font-size:0; }
	
	#utilMenu{height:22px; right:20px; top:0; padding-top:10px;}
	#utilMenu > div a{font-size:12px !important;}
	#utilMenu > div.user-menu-list a{line-height:22px}

	.gnb-open-btn{visibility:visible; opacity:1;filter:Alpha(opacity=100);  transform:translateX(0); -moz-transform:translateX(0); height:46px; width:46px;}
	.gnb-open-btn i{font-size:30px; color:#fff; line-height:46px;}
}

	
@media all and (max-width:640px){
	/* -------- 헤더 -------- */
	#headerInner{padding:10px 0 10px 0;}
	#headerInner .logo a { height:20px; background-size:auto 100% !important;}
	#headerInner .logo a  img { display:none;}

	#utilMenu{height:22px; right:20px; top:0; padding-top:10px;}
	#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{visibility:visible; opacity:1;filter:Alpha(opacity=100);  transform:translateX(0); -moz-transform:translateX(0); height:40px; width:40px;}
	.gnb-open-btn i{font-size:30px; color:#fff; line-height:40px;}

}







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