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

@import url('https://fonts.googleapis.com/earlyaccess/notosanskr.css');
/* layout */
body, table, th, td, input,
textarea, button, select {
	font-family:'Noto Sans KR', "나눔고딕", NanumGothic, "Nanum Gothic", "돋움", Dotum, Arial, sans-serif;
	font-size:13px;
	color:#666;
}
body {background-color:#e7e7e7; width:100%;}
#wrap {width:100%; min-width:980px; }
.clearfix{*zoom:1;}
.clearfix:after{clear:both; content:""; display:block;}
.fl{float:left;}
.fr{float:right;}

/* Header
------------------------------------------------------ */
#header {width:335px; height:100%; position:absolute; top:0; left:0; z-index:99;}
#headerInner {padding:48px 0 0 69px; background:url(/images/layout/header_inner_bg.png) repeat-y 69px top; height:480px;}
#headerInner > h1.main-logo{margin-left:18px; margin-bottom:33px;}
#header > p{position:absolute; bottom:72px; left:30px;}
/* -------- Gnb -------- */
#gnb{width:100%;}
#gnb ul{width:100%;}
#gnb ul li{height:102px;}
#gnb ul li > a{display:inline-block; height:69px; padding:16px 0 17px 23px; background:url(/images/layout/gnb_bar.png) no-repeat left center;}
#gnb ul li.on a, #gnb ul li:hover a{background:url(/images/layout/gnb_bar_on.png) no-repeat left center;}
#gnb ul li > a > span{font-size:13px; color:#898989; display:inline-block; padding-top:16px; margin-bottom:6px}
#gnb ul li > a > p{font-size:17px; color:#fff;}
#gnb ul li.on > a > span, #gnb ul li:hover > a > span, #gnb ul li.on > a > p, #gnb ul li:hover > a > p{color:#e62310;}
/* -------- 서브 Header -------- */
#header.sub-header{background:url(/images/layout/sub_header_bg.jpg) no-repeat left top; background-size:100% 100%; /*position:static;*/ position:fixed; float:left; min-height:941px; height:100%;}
#header.sub-header > #headerInner{padding:55px 0 0 66px; background:url(/images/layout/header_inner_bg.png) repeat-y 66px top;}
#header.sub-header > p{bottom:106px; left:66px;}
#header.sub-header #gnb ul li{position:relative;}
#header.sub-header #gnb ul li span.gnb-icon{display:inline-block; width:67px; height:67px; background:url(/images/layout/gnb_icon.png) no-repeat; position:absolute; top:16px; right:-33px; display:none;}
#header.sub-header #gnb ul li.on span.gnb-icon, #header.sub-header #gnb ul li:hover span.gnb-icon{display:block;}

/* Footer
------------------------------------------------------ */
#footer {display:inline-block; position:absolute; bottom:54px; right:52px; text-align:right;}
#footerInner {display:inline-block;}
#footerInner > p{font-size:13px; line-height:24px; color:#fff; vertical-align:middle;}
#footerInner > p img{display:inline-block; vertical-align:middle; margin-left:4px;}
#footer.ver2{right:33px; /*bottom:44px;*/ bottom:25px; position:fixed;}
#footerInner.sub-footer{display:none;}
#footerInner.sub-footer > p{color:#797979;}

/* Main Layout
------------------------------------------------------ */
#mainContainer {width:100%; height:100%; position:relative;}
/* -------- mainVisual -------- */
#mainVisual {width:100%; height:100%; max-height:1000px; min-height:971px; position:relative; overflow:hidden;}
/* visual-img */
#mainVisual .visual-img{width:100%; height:100%; position:absolute; top:0; left:0;}
#mainVisual .visual-img li{width:100%; height:100%; position:absolute; top:0; left:0; background-size:auto 100% !important;}
/* visual-control */
#mainVisual .visual-control{position:absolute; top:0; left:0;}
#mainVisual .visual-control > p{position:relative;}
#mainVisual .visual-control > p.first{width:442px; height:480px; margin-left:259px; background:url(/images/layout/visual_line01.png) no-repeat right 6px;}
#mainVisual .visual-control > p.second{width:326px; height:292px; background:url(/images/layout/visual_line02.png) no-repeat 1px bottom;}
#mainVisual .visual-control > p > a{display:inline-block; width:67px; height:67px; position:absolute; z-index:99; background:url(/images/layout/main_visual_btn.png) no-repeat; background-position:0 -67px; text-align:center; line-height:67px;}
#mainVisual .visual-control > p > a img{-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-ms-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out; position:absolute; top:50%; left:50%; margin-top:-10px; margin-left:-6.5px;}
#mainVisual .visual-control > p > a.visual-prev{bottom:0; left:0;}
#mainVisual .visual-control > p > a.visual-next{top:0; right:0;}
#mainVisual .visual-control > p > a.visual-next img{margin-left:-3.5px;}
#mainVisual .visual-control > p > a:hover{background-position:0px 0px; }
#mainVisual .visual-control > p > a:hover img{-webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg);}

/*#mainVisual .visual-control > p > a.visual-prev{bottom:0; left:0; background:url(/images/layout/main_visual_prev.png) no-repeat; background-position:0 -67px;}
#mainVisual .visual-control > p > a.visual-next{top:0; right:0; background:url(/images/layout/main_visual_next.png) no-repeat; background-position:0 -67px;}
#mainVisual .visual-control > p > a.visual-prev:hover, #mainVisual .visual-control > p > a.visual-next:hover{background-position:0 0;}*/

/* visual-bx */
#mainVisual .visual-bx{position:absolute; top:332px; left:50%; margin-left:-210px;}
#mainVisual .visual-bx li{position:absolute; top:0; left:0; display:none; text-align:center; width:417px;}
#mainVisual .visual-bx li:first-child{display:block;}
#mainVisual .visual-bx li > span{display:inline-block; width:176px; height:48px; background:url(/images/layout/visual_txt_bg.png) no-repeat; text-align:center; font-size:16px; line-height:48px; color:#fff; margin-bottom:36px; position:relative; opacity:0;filter:Alpha(opacity=0); top:-10px;}
#mainVisual .visual-bx li > p{font-size:66px; line-height:62px; /*line-height:82px;*/ color:#fff; background:url(/images/layout/visual_bx_bg.png) repeat-x left bottom; /*width:417px;*/ width:auto; display:inline-block; padding:0 5px; position:relative; top:-15px; opacity:0;filter:Alpha(opacity=0);}
#mainVisual .visual-bx li > p.text-one{margin-bottom:17px;}
#mainVisual .visual-bx li > p strong{font-weight:600;}
/* visual-btn */
#mainVisual .visual-btn{position:absolute; top:560px; left:287px; width:11px; height:65px; z-index:99;}
#mainVisual .visual-btn > span{display:inline-block; width:11px; height:11px; background:url(/images/layout/visual_btn.png) no-repeat; cursor:pointer; margin-top:14px; z-index:99;}
#mainVisual .visual-btn > span.on{background:url(/images/layout/visual_btn_on.png) no-repeat;}
#mainVisual .visual-btn > span:first-child{margin-top:0;}


/* -------- mainContent -------- */
#mainContent {width:100%;}

/* Sub Layout
------------------------------------------------------ */
#container {width:100%; height:100%; min-height:941px; position:relative; background:#e7e7e7 url(/images/layout/middle_area_bg.jpg) no-repeat right top;}
#subContainer{position:absolute; top:0; left:335px; max-width:100%; height:100%; float:left;}
#middleArea {padding-left:149px; min-height:941px;}
#content {width:1000px;}
#content .sub-title{font-size:60px; letter-spacing:-0.25px; color:#211f1e; font-weight:500; padding-top:180px; margin-bottom:36px; position:relative;}
#content .sub-title > span{font-weight:lighter;}
#content .sub-title > span.coment{position:absolute; top:154px; left:0; font-size:18px; color:#211f1e; font-weight:normal; letter-spacing:2px;}
#content .sub-title > p{display:inline-block; font-size:40px; letter-spacing:-1px; color:#cacaca; font-weight:500;}
#content .sub-title > p .title-bar, #content .sub-title > p .title-bar img{display:inline-block; vertical-align:bottom;}
#content .sub-title > .sub-line{position:absolute; top:0; left:-19px;}

/* -------------------------- Modal ---------------------------- */
#modal,#modalBg{display:none; width:100%; position:fixed; top:0px; left:0px; z-index:998;}
#modal{overflow-y:scroll; min-height:100%;}
#modalBg{height:100%; background-color:#000; opacity:0.7; filter:Alpha(opacity=70);}
.modal-con{position:fixed; top:50%; left:50%; z-index:999; width:1000px; height:692px; margin-left:-356px; margin-top:-346px; background-color:#fff;}
.modal-inner{width:100%; height:100%;}
.modal-tit{position:relative; width:961px; padding-left:39px; height:77px; font-size:20px; line-height:77px; color:#fff; background-color:#981c1c;}
.modal-close{position:absolute; top:26px; right:33px; z-index:999; display:inline-block; width:25px; height:25px; line-height:25px;}
/* -------- 장착메뉴얼 팝업 -------- */
#modalContent{display:none; width:1000px;}
#modalInner{width:100%;}