@charset "utf-8";
/*레이아웃*/
.wrap{ max-width:1240px; margin:0 auto}

@media screen and (max-width:1240px) {
.wrap{width:96%; max-width:96%; margin:0 2%;}
}
@media screen and (max-width:640px) {
.wrap{width:92%; max-width:92%; margin:0 4%;}
}

/* header */
#header_wrap { width: 100%; z-index: 2000 !important; position: relative; }
#header { width: 100%; margin: 0 auto; height: 90px;}
#header h1 { padding: 8px 0px 0px; left: 50%; top: 0px; margin-left: -620px; position: absolute; z-index: 1 }
.gnb {position:absolute; padding:8px; width: 26px; margin: 0 auto; top:25px; left:50%; margin-left:578px;}
.gnb ul { float: right; margin-top: 7px; }
.gnb li { float: left; margin-left: 0px; font-size: 11px; font-family: "맑은고딕", Malgun Gothic; background: url(../img/common/gnb_vline.gif) no-repeat left 6px; padding: 0 10px; }
.gnb li:first-child { background: none }
.gnb li a.allmenu { padding-right: 20px; background: url(../img/common/icon_all_pc.gif) no-repeat right 3px; }
.gnb li a { display: block; font-weight: bold }
.lnb { left: 50%; top: 30px; width: 650px; margin-left: -130px; position: absolute; z-index: 11 !important; }
.lnb > ul { margin-left: 0px }
.lnb > ul > li { text-align: center; letter-spacing: -0.5px }
.lnb > ul > li > a { padding: 8px 10px; display: block; font-size: 17px; font-weight: 600 }
.lnb > ul > li > a:hover, .lnb > ul > li > a.on { color: #16a54a; }
.lnb ul li.lnb_1 { float: left; position: relative; }
.lnb ul li.lnb_1 ul { position: relative; top: 30px; height: 180px; clear: both; display: none; /*position: absolute;*/ }
.lnb ul li.lnb_1 ul li a { font-size: 13px; display: block; padding: 3px 5px; color: #333; }
.lnb li.on ul li a { color: #019a30; }
.lnb li.on ul li a:hover { color: #16a54a; text-decoration: underline }
.lnb li.lnb1 { width: 130px; text-align: center }
.lnb li.lnb2 { width: 130px; text-align: center }
.lnb li.lnb3 { width: 130px; text-align: center }
.lnb li.lnb4 { width: 130px; text-align: center }
.lnb li.lnb5 { width: 130px; text-align: center }

.lnb ul li ul { border-left: 1px solid #f4f4f4 }



ul.bg_navi { background: #fff; top: 90px; width: 100%; height: 0px; overflow: hidden; position: absolute; z-index: 10;}
ul.bg_navi li.bgn { left: 50%; top: 20px; padding-top: 10px; margin-left: -620px; position: absolute; z-index: 10000; }
ul.bg_navi li.bgn p.lnb_tit { font-size: 14px; font-weight:600; margin-bottom:10px; display:none }
ul.bg_navi li.bgn p.lnb_img {  padding-top: 0px; width: 190px; font-size: 12px; letter-spacing: -1px; border-radius:0 16px 0 0; overflow:hidden;}
ul.bg_navi li.bgn p.lnb_img img { margin-bottom: 10px; }
ul.bg_navi li.bgn p.text { float: left; letter-spacing: -1px; color: #666; line-height:normal }




#header.basic {position:relative; background:#fff; border-bottom:none;}

#header.small {position:fixed; background:#fff; border-bottom:1px solid #e9e9e9; height:60px;}
#header.small h1 { padding: 4px 0px 0px;}
#header.small h1 img {width:80px;}
#header.small .lnb {top: 12px;}
#header.small ul.bg_navi {top: 60px;}
#header.small .gnb {padding:4px; top:15px;}





.mobile_lnb { display: none;}



@media screen and (max-width:1240px) {
#header_wrap { height: 60px}
#header { width: 100%; margin: 0 auto; height: 60px; position:relative }

#header h1 { padding: 6px 0px 0px; left: 2%; top: 0px; margin-left: 0; position: absolute; z-index: 1 ; }
#header h1 img {width:68px;}

.gnb { display: none;  }
.lnb{ display:none}

.mobile_lnb { display: block; position: absolute; top: 0px;  width:100%; text-align:right ; }
.mobile_lnb a.menu_btn{ }
.mobile_lnb a.menu_btn img{ margin:17px 0; margin-right:2%;}
.mobile_lnb > ul{ position:absolute; top:60px; z-index:3000 !important ; width:100%;  left:0; text-align:center; }
.mobile_lnb > ul > li{ display:block;width:100%;}
.mobile_lnb > ul > li > a{ height:auto;background:#fff;border-bottom:1px solid #e9e9e9; width:100%; display:block; padding:15px 0; font-size:16px;}    
.mobile_lnb > ul li > ul{ margin:0; }
.mobile_lnb > ul li > ul > li{ border-top:1px solid #616265; }
.mobile_lnb > ul li > ul > li:first-child{ border-top:none; }    
.mobile_lnb > ul li > ul > li > a{ background:#757679;color:#fff;font-size:14px; display:block; padding:10px 0; }
.mobile_lnb > ul li > ul > li > a:hover, nav li > ul > li.on > a{ color:#fff; }

.mobile_lnb > ul.mobile_menu_area{}
.mobile_lnb > ul > li > a.depth1{}
.mobile_lnb > ul li > ul.depth2{overflow:hidden; height:0px;}
.mobile_lnb > ul > li.gnb {display:none;}
.mobile_lnb > ul > li.menu_close{ text-align:right;  display:none;}
.mobile_lnb > ul > li.menu_close a{ border-bottom:0 }
.mobile_lnb > ul > li.menu_close img{ margin:0 10px;f}


.mobile_lnb > ul.mobile_menu_area li.gnb a{ display:inline-block !important; background:none;  color:#fff; width:auto; border-bottom:0px solid #cc504b; padding: 7px 10px; font-size:13px}
.mobile_lnb > ul.mobile_menu_area li.gnb{color:#fff; background:#c83833;}
}

@media screen and (max-width:640px) {
#header_wrap { height: 50px}
#header {height: 50px;}
#header h1 {left: 4%;}
#header h1 img {width:58px;}
.mobile_lnb a.menu_btn img{ margin:12px 0; margin-right:4%;}
.mobile_lnb > ul{top:50px; }
.mobile_lnb > ul.mobile_menu_area li.gnb a{ display:inline-block !important; background:none;  color:#fff; width:auto; border-bottom:0px solid #cc504b; padding: 7px 10px; font-size:13px}
.mobile_lnb > ul.mobile_menu_area li.gnb{color:#fff; background:#c83833;}

#header.small {height:50px;}
#header.small h1 { padding: 6px 0px 0px;}
#header.small h1 img {width:58px;}
#header.small ul.bg_navi {display:none;}
#header.small .gnb {display:none;}
}












/* footer */
#footer { position: relative; padding: 50px 0; background: #333; color:#999; clear:both; line-height:normal }
#footer .wrap {position: relative; display:flex;}

#footer .info {position:relative; width:75%;}
#footer .info .company {color:#a7a7a7; font-weight:600;}
#footer .info address {margin:20px 0;}
#footer .info address dl {margin-bottom:5px; display:flex;}
#footer .info address dl:last-child {margin-bottom:0px;}

#footer .info address dl dt {width:10%;}
#footer .info address dl dd {width:90%;}
#footer .info address dl dd span {display:inline-block; padding-right:12px; margin-right:12px; border-right:1px solid #111;}
#footer .info address dl dd span:last-child {border-right:none;}
#footer .info .copy {font-size:11px; color:#777; letter-spacing:2px;}
#footer .info .copy span {font-weight:800;}

#footer .etc {position:relative; width:25%; text-align:right;}
#footer .etc a {display:inline-block; color:#999; padding-left:12px; margin-left:12px; border-left:1px solid #111;}
#footer .etc a:first-child {border-left:none;}

#footer .btn_top {position:absolute; width:64px; height:64px; background:#009844; border-radius:50%; top:-32px; right:50px;}

@media screen and (max-width:1240px) {
#footer .btn_top {width:52px; height:52px; top:-26px; right:2%;}

#footer {padding: 40px 0;}
#footer .wrap {display:block;}

#footer .info {width:100%;}
#footer .etc {width:100%; margin-top:20px; text-align:left;}
#footer .etc a {padding-left:0; margin-left:0; padding-right:10px; margin-right:10px; border-left:0; border-right:1px solid #111;}
#footer .etc a:last-child {border-right:none;}
}
 
@media screen and (max-width:700px) {
#footer .btn_top {width:52px; height:52px; top:-26px; right:inherit; left:50%; margin-left:-26px;}

#footer  {font-size:14px;}
#footer .info address dl {margin-bottom:10px;}
#footer .info address dl dt {width:20%;}
#footer .info address dl dd {width:80%;}
#footer .info address dl dd span {padding-right:0; margin-right:0; display:block; font-size:13px; border-right:none;line-height:normal;}
#footer .info .copy {font-size:11px; letter-spacing:0;}
#footer .info .copy span {font-weight:800;}
}










.tit_area{  position:relative; color:#333;  padding:40px 0 20px 0; z-index:1999 !important ;  }

.tit_area .wrap{ position:relative; }
.tit_area .wrap .path{  position:absolute; right:0%; top:0px !important; font-size:13px;  }
.tit_area .wrap .path span.v_line{ padding:0 5px; color:#ccc}
.tit_area h2{ margin:10px 0; font-size:28px; line-height:28px; padding:0 ; font-family:Pretendard, "나눔바른고딕", NanumBarunGothic,"나눔고딕", Nanum Gothic;letter-spacing:-1px; font-weight:600   }
.tit_area h2:first-letter{ }
.tit_area p.sub_text{ font-size:13px; color:#999; padding:0px 0 0 0 ; letter-spacing:-1px}


.select_smenu { position: relative;  height: 28px; font-size: 13px; line-height: 28px; background: #fff !important; cursor: pointer; margin:0; }
.select_smenu .tit{  color:#16a54a;  padding:0 23px 0 0 }
.select_smenu .arr { position: absolute; top: 0; right: -2px; width: 20px; height: 28px;background: url(../img/common/select_arr2.png) right -28px no-repeat; overflow: hidden ;}
.select_smenu .arr.on { background-position: left top }
.select_smenu_list { position: absolute; top: 35px; left: 0; width: 100%; overflow: hidden;display: block;  height:0;   }
.select_smenu_list ul { border: 1px solid #cacbcd; }
.select_smenu_list li a { display: block; height: 28px; line-height:28px;  font-size: 13px;  padding-left: 15px;   border-bottom: 0px solid #cacbcd; background: #fff;    }



@media screen and (max-width:999px){
.tit_area{padding:20px 4% 0 4% }
.tit_area h2{ margin:10px 0  }
.tit_area p{ padding:0; }
}


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

.tit_area .wrap .path{ right:0%;  position:relative;  margin:0px 0}
.tit_area p.sub_text{ display:none}
.tit_area h2{  font-size:24px; line-height:24px;  }
.select_smenu .arr { }
.select_smenu_list { top: 28px;  width: 160px; margin-left:80px;   }
	
}