#header { position:relative; z-index:1000; }
#header .menu_bg { position:absolute; top:0; left:0; height:343px; background-color:#fff; width:100%; border-bottom:1px solid #eee; z-index:999; display:none; }
#header h1 { position:relative; z-index:1000; font-size:0; }
#header h1 a { display:inline-block; padding:16px 0 15px 35px; }
#header h1 a img {  }
#header h1 a img.white { display:none; }
#header .h_right { position:absolute; top:0; right:0; z-index:1000; }
#header .h_right > div { position:relative; /* padding:0 115px 0 0; */ }
#header .h_right nav { display:inline-block; }
#header .h_right nav > ul {  }
#header .h_right nav > ul > li { display:inline-block; position:relative; }
#header .h_right nav > ul > li > a { padding:0 32px; font-size:17px; font-weight:700; display:block; line-height:85px; }
#header .h_right nav > ul > li ul { position:absolute; top:110px; left:0; width:100%; z-index:9999; background-color:#fff; padding:7px 0; display:none; }
#header .h_right nav > ul > li ul li {  }
#header .h_right nav > ul > li ul li a { display:block; color:#000; text-align:center; padding:12px 0; font-size:16px; letter-spacing:-0.7px; }
#header .h_right nav > ul > li ul li a:hover { font-weight:500; }
#header .h_right nav > ul > li.service { position:absolute; top:0; right:0; }
#header .h_right nav > ul > li.service a { display:block; background-image:linear-gradient(to right, #163cff, #1732ba); height:87px; width:115px; position:relative; padding:0; }
#header .h_right nav > ul > li.service a div { position:relative; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; text-align:center; }
#header .h_right nav > ul > li.service a div span { font-size:15px; line-height:20px; display:block; color:#fff; font-weight:700; }





/* 메인페이지 헤더 */
#header.main h1 a img.normal { display:none; }
#header.main h1 a img.white { display:inline; }
#header.main .h_right nav > ul > li > a { color:#fff; }
#header.main .menu a img.normal { display:none; }
#header.main .menu a img.white { display:inline; }

/* 메뉴에 hover 했을 때 */
#header.menuhover {  }
#header.menuhover h1 { border-bottom:1px solid #eee; font-size:0; }
#header.menuhover .menu_bg { display:block; }
#header.menuhover .h_right nav > ul > li ul { display:block; }
#header.menuhover h1 a img.white { display:none; }
#header.menuhover h1 a img.normal { display:inline; }
#header.menuhover .h_right nav > ul > li > a { color:#000; }


/* 모바일 메뉴 */
#header .menu { position:absolute; top:52%; right:20px; transform:translate(0,-50%); display:none; z-index:11; }
#header .menu a { display:block; height:16px; }
#header .menu a img {  }
#header .menu a img.white { display:none; }

#header .mobile_menu { position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.5); display:none; z-index:12; }

#header .mobile_menu div { position:absolute; top:0; right:0; width:60%; background-color:#fff; height:100%; box-sizing:border-box; background-color:#fff; }
#header .mobile_menu div h2 { font-size:20px; box-sizing:border-box; padding:15px; border-bottom:1px solid #eee; font-weight:700; display:block; position:relative; color:#248fce; }
#header .mobile_menu div h2 a { display:block; position:absolute; top:50%; right:10px; transform:translate(0,-50%); }
#header .mobile_menu div h2 a img { height:26px !important; }

#header .mobile_menu div > ul { overflow-y:scroll; height:100%; }
#header .mobile_menu div > ul > li {  }
#header .mobile_menu div > ul > li:last-child { padding:0 0 70px; }
#header .mobile_menu div > ul > li > a { display:block; padding:15px; border-bottom:1px solid #eee; font-weight:700; font-size:16px; }
#header .mobile_menu div > ul > li ul { display:none; }
#header .mobile_menu div > ul > li ul li { border-bottom:1px solid #eee; }
#header .mobile_menu div > ul > li ul li a { display:block; padding:12px 15px; font-size:14px; color:#505050; }





@media screen and (max-width:1280px) {
  #header h1 a { padding:18px 0 19px 25px; }
  #header h1 a img { height:48px !important; }
  #header .h_right > div { /* padding:0 100px 0 0; */ }
  #header .h_right nav > ul > li > a { padding:0 25px; font-size:16px; }
  #header .h_right nav > ul > li.service a { width:100px; }
  #header .h_right nav > ul > li ul { top:90px; }

  #header .menu_bg { height:300px; }
  #header .h_right nav > ul > li ul li a { font-size:15px; letter-spacing:-1px; }

}


@media screen and (max-width:1000px) {
  #header .h_right nav > ul > li.service { display:none; }
  #header .h_right > div { /* padding:0; */ }
}


@media screen and (max-width:980px) {
  #header h1 a { padding:13px 0 12px 20px; }
  #header h1 a img { height:40px !important; }
  #header .h_right nav > ul > li > a { padding:0 15px; line-height:65px; }

  #header .h_right nav > ul > li ul { top:70px; }
  #header.menuhover .menu_bg { height:280px; }

}


@media screen and (max-width:780px) {
  #header .menu { display:block; }
  #header .h_right { display:none; }
  #header h1 { z-index:10; }

}


@media screen and (max-width:640px) {
  #header h1 a { padding:9px 0 8px 12px; }
  #header .menu { right:12px; }
  #header .menu a img {  }
}