@charset "utf-8";




.wrap{position:relative;  max-width:1200px; margin:0 auto; z-index:100  /*overflow:hidden*버튼등 영역밝 가려짐떄문에 못씀*/ } /*전체 최대 넓이 조절 */

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

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



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

#header_wrap { position: relative;  z-index: 2000 !important; height:82px; position:relative; width:100%; top:0; left:0}
#header { width: 100%;  height: 82px; background:#1b1b1b; background:rgba(0,0,0,1); }
#header h1 {position: absolute; z-index: 10000; padding: 20px 0px 0px; left: 50%;  margin-left: -600px;  }

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



.gnb { margin: 0 auto;  z-index:100;  }
.gnb >  ul { float:right; padding-top:25px; text-align:center  }
.gnb > ul > li { float: left; margin-left: 0px;  position:relative;  margin-left:10px }
.gnb > ul > li >  a { padding:0; font-weight: 400;  display:block;cursor:pointer;padding:0 5px ; }
.gnb li.global{ background:url(../img/common/global_arr.png) no-repeat right 50% ; padding-right:10px}
.gnb li.global a{  cursor:pointer;  font-size:13px;  }
.global_open{ display:none; position:absolute; top:40px;z-index:100000;background:#1b1b1b; background:rgba(0,0,0,0.8); width:70px; text-align:center; margin-left:-20px  } 
.global_open ul { overflow:hidden;  padding:5px 0}
.global_open ul li{ display:block; width:100%; text-align:center; width:100%;}
.global_open ul li a{ color:#fff; line-height:1em; padding:5px 5px ; letter-spacing:0}






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

@media screen and (max-width:1200px) {
.lnb {  margin-left: -520px;     }	
}

.lnb > ul{}
.lnb > ul > li{ }
.lnb > ul > li:last-child{ }
.lnb > ul > li:first-child{ margin-left:250px}

.lnb > ul > li { text-align: center; letter-spacing: -0.5px ; float:left; width:150px}
.lnb > ul > li > a { padding: 0px 25px; display: block; font-size: 18px;  letter-spacing:0px ; color:#f2f2f2; font-weight: 400; background:url(../img/common/nav_dot.png) no-repeat left;  }
.lnb > ul > li:first-child > a{ background:none}
.lnb > ul > li:hover {/* background:#1b1b1b; background:rgba(0,0,0,0.4);*/ }
.lnb ul li  span.b2b{ color:#e64e56}


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

.lnb ul li.lnb_1 { float: left; position: relative; }
.lnb ul li.lnb_1 ul {  display: none;  position: relative; top:10px; height: 100%; clear: both; height:140px; overflow:hidden}
.lnb ul li.lnb_1 ul li a { font-size: 14px; display: block; padding: 3px 5px; color: #fff; line-height:1.5em }
.lnb ul li.lnb_1 ul li a:hover{ color:#fff; text-decoration:underline}

.lnb li.on ul li a {  }
.lnb li.on ul li a:hover { color:#fff}   /*오버색상*/
/*
.lnb li.lnb1 { width: 130px; text-align: center }
.lnb li.lnb2 { width: 100px; text-align: center }
.lnb li.lnb3 { width: 80px; text-align: center }
.lnb li.lnb4 { width: 100px; text-align: center }
.lnb li.lnb5 { width: 100px; text-align: center }
.lnb li.lnb6 { width: 110px; text-align: center }
.lnb li.lnb7 { width: 80px; text-align: center }
.lnb li.lnb8 { width: 100px; text-align: center }
.lnb li.lnb9 { width: 100px; text-align: center }
*/
  .bg_navi { background:#1b1b1b; background:rgba(116,124,137,1); top: 82px; 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 { display: none }

@media screen and (max-width:1000px) {
#header_wrap { height: 50px}
#header {   }
#header { width: 100%; margin: 0 auto; height: 50px; position:relative; background:#1b1b1b; background:rgba(0,0,0,1); }
#header h1 { padding: 10px 0px 0px; left: 4%; top: 0px; margin-left: 0; position: absolute; z-index: 1 ; max-width:110px ; position:relative ; text-align: left}
#header h1 img{ max-height:32px;}
.gnb { display: none;  }
.lnb{ display:none}

.mobile_lnb { display: block; position: absolute; top: 0px;  width:100%; text-align:right ;}
.mobile_lnb a.menu_btn{ padding:0 4% 0 0 ; display:inline-block }
.mobile_lnb a.menu_btn img{ margin:14px 0;margin-right:0%;}




.mobile_global{position:absolute; top:0; right:100px; background:url(../img/common/global_arr.png) no-repeat right 50% ; padding-right:5px; margin-right:10px}
.mobile_global li{ float:left; line-height:47px; position:relative}
.mobile_global li a{  padding:0 7px; font-size:13px; color:#eaeaea; letter-spacing:0; font-weight:400;   margin-left:-1px; }
.mobile_global li a.on{ color:#dc4848}
.mobile_global li:first-child a{ }

.mobile_global li.global{ }
.mobile_global li.global a{  cursor:pointer;  font-size:13px; line-height:1em }
.mobile_global .global_open{ display:none; position:absolute; top:50px;z-index:100000;background:#1b1b1b; background:rgba(0,0,0,1); width:70px; text-align:center; margin-left:-18px  } 
.mobile_global .global_open ul { overflow:hidden;  padding:5px 0}
.mobile_global .global_open ul li{ display:block; width:100%; text-align:center; width:100%; line-height:1.8em}
.mobile_global .global_open ul li a{ color:#fff; line-height:1em; padding:8px 5px ; letter-spacing:0}


.mobile_global li.sns a{  cursor:pointer; }
.mobile_global .sns_open{ display:none; position:absolute; top:50px; z-index:10000; background:#1b1b1b; background:rgba(0,0,0,1); text-align:left;    padding:0; margin-left:-2px } 
.mobile_global .sns_open ul{ overflow:hidden; padding:0; margin:0; width:35px }
.mobile_global .sns_open ul li{ float:left; line-height:1.8em; margin:0; padding:0}
.mobile_global .sns_open ul li a{ color:#fff; margin:0px; line-height:1em; padding:0}
.mobile_global .sns_open ul li img{ width:35px;}



/*
.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:first-child{ border-top:0}
.mobile_menu_area li h3{ float:left;  text-align:left; margin:0; padding:0; font-size:16px; padding:5px 5px; color:#000; font-weight:400}
.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%;}
	.mobile_lnb a.menu_btn{ padding:0 4% 0 0 ; }
	.mobile_global{right:60px}
.mobile_menu_area > li {  padding:10px 3%; }
.mobile_menu_area li ul{ margin-left:70px;   text-align:left}
.mobile_menu_area li h3{ letter-spacing:-1px; padding:5px 0 0 0; font-size:13px}
.mobile_menu_area li ul li{ width:50%; padding:0 0; margin:0}
.mobile_menu_area li ul li a{  font-size:13px}
}



/*search*/
.basic_search_area{ display:none; position:absolute; top:0; left:0; height:50px; z-index:100000; width:100%; background:#000; text-align:center; background:#1b1b1b; background:rgba(0,0,0,0.9);}
.basic_search_box{width:50%; text-align:center; margin:4px auto 0 auto}
.basic_search_box img{ padding:5px}
.basic_search_box input[type=text]{ width:50%; border:0; height:36px; line-height:36px; padding:0 5px; margin:0 ; background:none; border-bottom: 1px solid #999; color:#fff}

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

.basic_search_area{}
.basic_search_box{width:90%;}
.basic_search_box input{ width:60%; }
}


/* footer */
#footer { position: relative; padding: 25px 0 20px 0 ; clear:both; color:#333; background:#fff; border-top:1px solid #e4e4e4  }
#footer:after{ clear:both; display:block; content:"";}
#footer .foot_link { overflow: hidden; padding:0; margin-bottom:0px; font-size:13px; border-bottom:0px solid #e4e4e4; float:left; color:#333}
#footer .foot_link span{ display:inline-block; line-height:22px}
#footer .foot_link span.v_line{ padding:0 10px; color:#c4c4c4;  }
#footer .sns_icon{ float:right}
#footer .sns_icon li{ display:inline-block}

#footer h1{ float:left}
#footer address { font-size: 12px; line-height:1.4em;  letter-spacing:0px; clear:both; color:#666 }
#footer address strong{ margin-right:3px; font-weight:400; color:#333}
#footer address span{ color:#d2d2d2; padding:0 10px;  }
#footer address br{ display:none}
#footer address p{}
#footer .copy{ font-size:11px;  color:#333;  padding-right:170px ; letter-spacing:0}
#footer .copy span{ color:#7b7b7b; }


#footer .family_area {  width: 128px; float:right }

#footer .family_area .f_privacy{  height: 30px; font-size: 12px; line-height: 30px;}
#footer .family_area .f_privacy span{color:#d2d2d2; padding:0 5px; }

#select_family { position: relative; height: 28px; width: 120px; margin-left:10px;}
#select_family .select_tit { position: relative; width: 118px; height: 28px; font-size: 12px; line-height: 28px; color: #666;  background: #f7f7f7; cursor: pointer; z-index: 100; border:1px solid #d8d8d8 }
#select_family .select_tit .tit{ padding-left: 10px;  height: 28px; line-height: 28px; }
#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: 12; height:0 ; display:block}
#select_family .select_list ul { width: 118px; 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: 20px; font-size: 12px; color: #666; padding-left: 5px; line-height: 20px;  }
#select_family .select_list li:hover{ background:#ebebeb}




/*

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

#footer .family_area{ top: auto; position:relative; float:left}
#footer .family_area *{ float:left}	
}
*/



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


@media screen and (max-width:640px) {
#footer {padding:20px 0 ;}
#footer h1{ float:left; display:none}
#footer address, #footer .copy {  margin-left:0px; padding-right:0 }

#footer .family_area { position: absolute; top: 50%; right: 0; z-index:10000 ; position:relative }
#footer .foot_link { font-size:12px; }
#footer .family_area { display:none }

#footer address span{ padding:0 5px;  }

}


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







/***********************************************서브레이아웃***************************************************/
/*서브비주얼*/
.sub_visual { position:relative;   margin: 0 auto; height:100%; text-align:center;  background-repeat:no-repeat; background-position:top center; overflow:hidden }
.visual_pa{ position:absolute; top:0; left:0;  width:100%; height:100%; z-index:1; background:url(../img/sub/dot.png) repeat}
.sub_visual .wrap{ height:100%;}
.sub_visual_text{ position:absolute;  top:50%; left:50%; width:100%; margin-left:-50%; text-align:center; margin-top:-100px }
.sub_visual h2 { font-size: 2.778em; line-height:1em; color:#fff ;  text-shadow: #666 1px 1px 3px;  font-weight:100 ; line-height:1em }
.sub_visual p { font-size: 1.667em; line-height:1em; color: #fff; padding:0; margin-top:10px; font-weight:100 ; line-height:1.2em }





/*타이틀, path*/

.sub_container{ clear:both; position:relative; margin:0 auto;  z-index:1;overflow:hidden ; padding:90px 0 100px 0; }

.sub_container_company{ clear:both; position:relative; margin:0 auto;  z-index:1;overflow:hidden ; padding:90px 0 100px 0; }

.tit_area{  position:relative; color:#333; z-index:1999 !important ; margin-bottom:3em ;}
.tit_area .wrap{ }
.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 screen and (max-width:1200px){
.sub_container{  padding:80px 0 50px 0}	
.sub_container_company{  padding:50px 0 50px 0}	
.tit_area{  margin-bottom:2em ;}
.tit_area h2{  font-size:30px;  }

}

@media screen and (max-width:1000px){
.tit_area{   margin-bottom:1em ;}
.tit_area h2 { font-size:22px; } 
.sub_container{  padding:60px 0 30px 0}	
.sub_container_company{  padding:30px 0 30px 0}	

}


@media screen and (max-width:860px) {
.subs_text{ display:none}
}

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



/*일반페이지*/

.cs_container{ margin: 3em 0 5em 0; overflow:hidden}

@media screen and (max-width:1000px){
.cs_container{ margin: 1em 0 2em 0}
}







/*go_top*/

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



/*게시판 타이틀*/
.customer_board{ margin-top:2em}

@media screen and (max-width:1000px){
.customer_board{ margin-top:4em}
	
}










/**/



.mobile_sub_nav{ display:block;   }
.mobile_sub_nav{ border-bottom:1px solid #dddddd; height:44px; text-align:left; text-indent:15px ; background:#747c89; }
.mobile_sub_nav > ul{ max-width:1200px; margin:0 auto; font-size:16px;}
.mobile_sub_nav > ul > li{ float:left;  color:#fff; border-right: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:1px solid  rgba(255,255,255,0.2);}
.mobile_sub_nav ul > li.home{  background:url(../img/sub/path_home.gif) no-repeat 50% 50%;  text-indent: -9999px; width:50px;  }
.mobile_sub_nav ul > li.home a{ display:block; width:100%; height:100%; }
.mobile_sub_nav ul > li.nav_gnb{ width:180px}
.mobile_sub_nav ul > li.snb_area{ width:180px}

#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:1px solid #dddddd; margin-top:-1px; z-index:101; 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:42px;cursor:pointer; background:url("../img/sub/snb_click.png") no-repeat 90% 51%;  font-size:inherit;}	

@media screen and (max-width:640px){
.mobile_sub_nav{  height:35px;}
.mobile_sub_nav ul > li.nav_gnb{ width:120px}
.mobile_sub_nav ul > li.snb_area{ width:120px}
.mobile_sub_nav > ul{ font-size:13px;}
.mobile_sub_nav > ul > li{ height:35px; line-height:35px;}
#snb_menu .select p {height:35px; line-height:35px}
}