@charset "utf-8";




.wrap{position:relative;  max-width:1200px; margin:0 auto; /*overflow:hidden*버튼등 영역밝 가려짐떄문에 못씀*/ } /*전체 최대 넓이 조절 */
@media screen and (max-width:1260px) {
.wrap{margin:0 2% !important; }
}

@media screen and (max-width:640px) {
.wrap{margin:0 4% !important; }
}




/******************************* 공통layout ******************************************/

#header_wrap { position: relative;  z-index: 2000 !important; height:90px}
#header { width: 100%;  height: 90px; background:#FFF;}
#header h1 {position: absolute; z-index: 1; left: 50%;  margin-left: -600px;  top:50%; transform:translateY(-50%);}
#header h1 a{ display:inline-block}

@media screen and (max-width:1200px) {
#header h1	{ margin-left: -48%;}
#header {height:50px;}
#header_wrap {height:50px;}
}


/*gnb*/
.gnb { margin: 0 auto;  padding-top:25px; z-index:100;  max-width:1200px}
.gnb >  ul { float:right;}
.gnb li { float: left; margin-left: 0px; font-size: 15px; position:relative;padding:0; font-weight: 400;  display:block; padding:5px 5px ;color:#000;}
.gnb li.icon{ color:#d3d3d3; padding:5px 2px}




/*lnb*/
.lnb { position: absolute; z-index: 11 !important; top: 0px; line-height:91px; left: 50%; width: 1200px; margin-left: -500px; overflow:hidden;    }

@media screen and (max-width:1200px){
  .lnb {display:none;}
  /* #header h1 a {display:none;} */
}

.lnb:hover{/*background: url(../img/common/gnb_line.png)*/ /*border-left:1px solid #03F; border-right:1px solid #03F*/}
.lnb > ul{}
.lnb > ul > li{ border-left:1px solid #fff}
.lnb > ul > li:last-child{border-right:1px solid #fff; }
.lnb > ul > li:first-child{ margin-left:200px}
.lnb > ul:hover { border-right:1px solid #eeeeee;   }
.lnb > ul:hover > li{ border-left:1px solid #eeeeee}
.lnb > ul:hover > li:last-child{border-right:1px solid #eeeeee}
.lnb > ul > li { text-align: center; letter-spacing: -0.5px }
.lnb > ul > li > a { padding: 0px 10px; display: block; font-size: 19px;  letter-spacing:0px ; color:#333; font-weight: 400; line-height:91px;}
.lnb > ul > li:hover {background:linear-gradient(#ff7d00, #fb9a3d);}

.lnb > ul > li > a:hover, .lnb > ul > li > a.on {color:#ff7d00; } /* 오버색상*/
.lnb > ul > li:hover a{ color:#fff !important }

.lnb ul li.lnb_1 { float: left; position: relative; }
.lnb ul li.lnb_1 ul {  display: none;  position: relative; top:0px; height: 100%; clear: both; height:200px; overflow:hidden}
.lnb ul li.lnb_1 ul li a { font-size: 14px; display: block; padding: 3px 5px; color: #333; line-height:1.7em }
.lnb li.on ul li a {  }
.lnb li.on ul li a:hover { color: #001546;  background:#c5742c ;}   /*오버색상*/
.lnb li.lnb1 { width: 145px; text-align: center }
.lnb li.lnb2 { width: 145px; text-align: center }
.lnb li.lnb3 { width: 145px; text-align: center }
.lnb li.lnb4 { width: 145px; text-align: center }
.lnb li.lnb5 { width: 145px; text-align: center }
  .bg_navi { background: #fff; top: 80px; width: 100%; height: 0px; overflow: hidden; position: absolute; z-index: 10; /*opacity:.99;filter:alpha(opacity=99);*/}
  .bg_navi li.bgn { left: 50%; top: 0px; width: 1000px; padding-top: 10px; margin-left: -500px; position: absolute; z-index: 10000; }
  .bg_navi li.bgn p.lnb_tit { font-size: 14px; font-weight:600; margin-bottom:10px; display:none }
  .bg_navi li.bgn p.lnb_img {  padding-top: 0px; width: 250px; font-size: 12px; letter-spacing: -1px; display:none }
  .bg_navi li.bgn p.lnb_img img { margin-bottom: 10px; }
  .bg_navi li.bgn p.text { float: left; letter-spacing: -1px; color: #666; line-height:normal }



.mobile_lnb a.menu_btn { display: none; }

@media screen and (max-width:1200px) {
  #header_wrap { height: 50px}
  #header { width: 100%; margin: 0 auto; height: 50px; position:relative }
  #header h1 { left: 40%;  margin-left: 0; position: absolute; z-index: 1 ; transform:translateY(-50%);}
  #header h1 img{ width:170px;}
  .gnb { display: none;  }
  .lnb{ display:none}

  .mobile_lnb { display: block !important; position: absolute; top: 0px;  width:100%; text-align:left ;}
  .mobile_lnb a.menu_btn{ padding:0 0 0 2% ; display:inline-block }
  .mobile_lnb a.menu_btn img{ margin:12px 0;margin-right:0%;}
  .mobile_global{position:absolute; top:0; right:13%}
  .mobile_global li{ float:left; line-height:47px}
  .mobile_global li a{ border-left:1px solid #CCC; padding:0 5px; font-size:12px}
  .mobile_global li:first-child a{ border:0; }
  /*
  .mobile_menu_area > ul{ position:absolute; top:60px; z-index:3000 !important ; width:100%;  left:0;  background:#fff;}*/
  .mobile_menu_area{ overflow:hidden; display:none; background:#fff; display:block; opacity:.98;filter:alpha(opacity=98);}
  .mobile_menu_area > li { clear:both; padding:15px 2%; border-top:1px solid #E8E8E8; overflow:hidden}
  .mobile_menu_area li h3{ float:left;  text-align:left; margin:0; padding:0; font-size:16px; padding:5px 5px; color:#000; font-weight:600}
  .mobile_menu_area li ul{ margin-left:150px;   text-align:left}
  .mobile_menu_area li ul li{ float:left; margin-right:15px; padding:0}
  .mobile_menu_area li ul li a{ font-size:14px; padding:3px 5px; display:inline-block}
  .mobile_menu_area li.menu_close{ text-align:left ; background:#333; overflow:hidden; }
  .mobile_menu_area li.menu_close a{ border-bottom:0;  }
  .mobile_menu_area li.menu_close img{ margin:0 10px; float:right}
  .mobile_menu_area li a.call {   width:auto;  padding: 10px 10px; font-size:16px;   text-align:left; font-weight:600 ; color:#fff}
  .mobile_menu_area li a.call span{ color:#fff}

}

@media screen and (max-width:640px) {
	/* #header h1 { left: 4%;} */
  #header h1 {left:35%;}
  #header h1 img {width:150px;}
	.mobile_lnb a.menu_btn{ padding:0 0 0 4% ; }
  .mobile_menu_area > li {  padding:10px 3%; }
  .mobile_menu_area li ul{ margin-left:100px;   text-align:left}
  .mobile_menu_area li h3{ letter-spacing:-1px; padding:5px 0 0 0; font-size:14px}
  .mobile_menu_area li ul li{ width:50%; padding:0 0; margin:0}
  .mobile_menu_area li ul li a{ font-size:13px}
}






/* footer */
#footer { position: relative; padding: 40px 0 ;background:#2e2e2e; border-top:0px solid #dddddd; clear:both; color:#7d7d7d }
#footer .foot_link { overflow: hidden; padding:0 0 10px 0; margin-bottom:20px; font-size:13px; border-bottom:1px solid #666}
#footer .foot_link span{ display:inline-block; line-height:22px}
#footer .foot_link span.v_line{ padding:0 10px; color:#999;  }
#footer .sns_icon{ float:right}
#footer .sns_icon li{ display:inline-block}

#footer h1{ float:left}
#footer address { font-size: 14px; font-weight:400; line-height:1.4em; color: #7d7d7d; padding-right:170px }
#footer address span{font-weight:600; color:#585858; padding:0 5px;  }
#footer .copy{font-weight:400; font-size:14px;  color:#7d7d7d; text-transform:uppercase; padding-right:170px }
#footer .copy span{ color:#7d7d7d; font-weight:600;}



#footer .family_area { position: absolute; top: 50%; right: 0; z-index:10000; transform:translateY(-50%); }

#select_family { position: relative; height: 28px; width: 250px; }
#select_family .select_tit { position: relative; width:250px; height: 28px; font-size: 11px; line-height: 28px; color:black;  background: #585858; cursor: pointer; z-index: 100;}
#select_family .select_tit .tit{ padding-left: 16px;  height: 28px; line-height: 28px;  font-family:Verdana, Geneva, sans-serif}
#select_family .select_tit .arr { position: absolute; top: 0; right: 0px; width: 29px; height: 28px; background: url(../img/common/select_arr.png) left -28px no-repeat; overflow: hidden }
#select_family .select_tit .arr.on { background-position: left top }
#select_family .select_list { position: absolute; bottom: 0; right: 0; width: 100% !important; padding-bottom: 26px; overflow: hidden; border-bottom: none; display: block; z-index: 0; height:0 ; display:block}
#select_family .select_list ul { width: 250px; background:#fff; border:1px solid #d8d8d8 }
#select_family .select_list li{ width:100%; margin-left:0 !important}
#select_family .select_list li a { display: block; height: 30px; font-size: 12px; color: #666; padding-left: 5px; line-height: 30px;  }
#select_family .select_list li:hover{ background:#ebebeb}


@media screen and (max-width:1200px) {
#footer address br { display:none}
}




@media screen and (max-width:860px) {
#footer {padding:30px 0 ;}
#footer h1{ float:left; display:none}
#footer address, #footer .copy {  margin-left:0px; padding-right:0 }
#footer .family_area {position:relative; margin-top:30px;}
/* #footer .family_area { position: absolute; top: 50%; right: 0; z-index:10000 ; position:relative } */
}






/***********************************************서브레이아웃***************************************************/
/*서브비주얼*/
.sub_visual { height: auto; margin: 0 auto; height:260px; text-align:center;  background-repeat:no-repeat; background-position:top center; }
.sub_visual h2 { font-size: 50px; padding-top: 100px; font-weight:bold; margin:0; color:#fff ; line-height:30px; text-shadow: #666 1px 1px 5px;  }
.sub_visual p { font-size: 15px; color: #fff; padding:0; margin-top:25px; }

.sub_bg01{ background:#fff url(../img/sub/sub_visual01.jpg) top center no-repeat; background-attachment:fixed;}
.sub_bg02{ background:#fff url(../img/sub/sub_visual02.jpg) top center no-repeat; background-attachment:fixed; }
.sub_bg03{ background:#fff url(../img/sub/sub_visual03.jpg) top center no-repeat; background-attachment:fixed; }
.sub_bg04{ background:#fff url(../img/sub/sub_visual04.jpg) top center no-repeat; background-attachment:fixed;}
.sub_bg05{ background:#fff url(../img/sub/sub_visual05.jpg) top center no-repeat; background-attachment:fixed;}
.sub_bg06{ background:#fff url(../img/sub/sub_visual06.jpg) top center no-repeat; background-attachment:fixed;}
.sub_bg07{ background:#fff url(../img/sub/sub_visual07.jpg) top center no-repeat; background-attachment:fixed;}
.sub_bg08{ background:#fff url(../img/sub/sub_visual08.jpg) top center no-repeat; background-attachment:fixed;}

@media screen and (max-width:1200px) {
.sub_visual{ height:200px; background-size:200% }
.sub_visual h2 { padding-top: 80px;}
}

@media screen and (max-width:860px) {
.sub_visual{ height:150px;  background-size:200% }
.sub_visual h2 { font-size:35px; padding-top: 50px;}
}

@media screen and (max-width:640px) {


	.sub_visual h2 { font-size:24px;}
.sub_visual{ height:120px; background-size:250% }
.sub_visual p{ display:none}
}
@media screen and (max-width:500px) {
.sub_visual{  background-size:350% }
}






/*타이틀, path*/
.tit_area{  position:relative; color:#333; z-index:1999 !important ; margin-bottom:3em ;}
.tit_area .wrap{ }
.tit_area .path{  position:absolute; left:0%; top:0px ;font-size:14px; color:#777  }
.tit_area .path span.home{  background:url(../img/sub/path_home_g.gif) no-repeat left 50%;  display:inline-block; width:20px; height:20px; text-indent: -9999px;}
.tit_area .path span.v_line{ background:url(../img/sub/path_arr.gif) no-repeat 50% 50%; display:inline-block; width:20px; height:10px;}
.tit_area h2{font-size:30px; text-align:center; padding:1%; text-align:center  }

.mobile_path{ display:none}

@media screen and (max-width:1200px){
.tit_area{  }
.tit_area h2{  font-size:30px;   }

.tit_area .path{  display:block; position:relative; text-align:center; top:inherit}
.mobile_path{ display:block; display:none }
.mobile_path{  overflow:hidden;border-bottom:1px solid #dddddd;}
.mobile_path > li{ float:left;  color:#333; border-right:1px solid #dddddd; height:44px; line-height:44px; display:inline-block; padding:0 10px}
.mobile_path > li.home{  background:url(../img/sub/path_home.gif) no-repeat 50% 50%;  text-indent: -9999px; width:20px; margin-left:2%;  border-left:1px solid #dddddd;}
.mobile_path > li.snb_area{ width:140px}

#snb_menu{     }
#select_open {  width:160px; top:46px;position: absolute;  background:#fff; display: none; border-left:1px solid #dddddd ; border-right:1px solid #dddddd; margin-top:-1px; z-index:30000; margin-left:-11px; }
#select_open .open li { clear: both; margin: 0; float:left; width:160px; text-indent:10px }
#select_open .open li a { display: block;   height:46px; line-height:46px; border-bottom:1px solid #dddddd;}
#select_open .open li a:hover { color:#fff; background:#999}
.select { width: 100%; }
.select input { width: 100%;   border: 0;   height:44px; line-height:44px;cursor:pointer; background:url("../img/sub/snb_down.gif") no-repeat 90% 50%; font-size:inherit;}

}

.sub_container{ position:relative; margin:0 auto;  z-index:1;overflow:hidden ; padding:70px 0 70px 0; min-height:350px; }

@media screen and (max-width:1000px){
.sub_container {width:100%;}
.tit_area{   margin-bottom:2em ;}
}


@media screen and (max-width:860px) {
.tit_area h2 { font-size:35px;}
.tit_area .path {display:none;}
}

@media screen and (max-width:640px){
.tit_area h2{  font-size:24px;   }
}



/*go_top*/

.btn_top{ position:absolute; right:2%;bottom:2%; width:50px; z-index:100}
.btn_top{ position:fixed}
@media screen and (max-width:1400px){
.btn_top { display:none }
}





 /*sub_nav*/
/* .sub_nav{position:relative;margin-top:-45px;background:#ff7d00; z-index:2;} */
.sub_nav {position:relative; background:#ff7d00;  z-index:2}
.sub_nav .wrap{ overflow: visible; display:block; text-align:center;  }
.sub_nav .sub_menu{position:relative;margin-top:-0px;border-left:0;z-index:1; top:0 ; overflow-x:auto}
.sub_nav .sub_menu:after{content:"";display:block;clear:both;visibility:hidden}
.sub_nav .sub_menu li{display:inline-block;text-align:center}

.sub_nav .sub_menu li:first-child a{border-left:0px solid #002b5c;}
.sub_nav .sub_menu a,	.sub_navi .sub_menu a.on{display:block;position:relative;color:#fff;line-height:43px; }
.sub_nav .sub_menu a{ padding:0 40px; font-size:15px}
.sub_nav .sub_menu li a.on{ color:#fff; /* border-bottom:3px solid #C00 border-bottom:3px solid #ad123e; */ background-color:#fff; color:#000;}




.tit_area h2{  font-size:38px;  padding:0 ; letter-spacing:-1px; font-weight:400 ; color:#333; text-align:center ; }
.subs_text{ text-align:center; padding-top:5px; color:#878787}


@media all and (max-width:1200px) {
.tit_area h2 { font-size: 30px;   }

}


@media all and (max-width:640px) {

.tit_area h2 { font-size: 22px;  }
}







.mobile_sub_nav{ display:none}

@media screen and (max-width:1200px){

}


@media screen and (max-width:860px){

  .sub_nav .sub_menu{ display:none;}



.mobile_sub_nav{ display:block;  position:relative;}
.mobile_sub_nav{ border-bottom:1px solid #dddddd; height:43px; text-align:left; text-indent:15px ; background:#ff7d00; }

.mobile_sub_nav > ul > li{ float:left;  color:#fff; border-left:1px solid rgba(255,255,255,0.2); height:44px; line-height:44px; display:inline-block; box-sizing:border-box;}
.mobile_sub_nav > ul > li:first-child{ border-left:0px solid #dddddd;}
.mobile_sub_nav ul > li.home{  background:url(../img/sub/path_home.gif) no-repeat 50% 50%;  text-indent: -9999px; width:10%;  }
.mobile_sub_nav ul > li.home a{ display:block; width:100; height:100%;}
.mobile_sub_nav ul > li.nav_gnb{ width:30%}
.mobile_sub_nav ul > li.snb_area{ width:60% }

#snb_menu{ position:relative}
#select_open { display:none; width:100%;  top:46px;position: absolute;  background:#fff;  border-left:1px solid #dddddd ;border-bottom:1px solid #dddddd ; border-right:0px solid #dddddd; margin-top:-1px; z-index:31; margin-left:-1px; padding:10px 0 }
#select_open .open li { clear: both; margin: 0; float:left; width:100%; }
#select_open .open li a { display: block; height:30px;  line-height:30px; color:#666}
#select_open .open li a:hover { color:#333}
#snb_menu .select { width: 100%; }
#snb_menu .select p { width: 100%;   border: 0;   height:44px; line-height:44px;cursor:pointer; background:url("../img/sub/snb_click.png") no-repeat 95% 2px;  font-size:inherit;}


}