/* =========================================================
   RESET & BASE
========================================================= */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{font-family:'Malgun Gothic','맑은고딕','Noto Sans KR',sans-serif; color:#333; line-height:1.5; -webkit-text-size-adjust:100%;}
ul,ol,li{list-style:none;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;border:0;vertical-align:middle;}
button{border:0;background:none;cursor:pointer;font-family:inherit;}
.clearfix:after{content:'';display:block;clear:both;}
.wrap{width:1190px;margin:0 auto;position:relative;}
.accessibility{position:absolute;left:-9999px;top:-9999px;}

/* =========================================================
   HEADER
========================================================= */
#header{position:relative;width:100%;background:#fff;border-bottom:1px solid #e5e5e5;z-index:100;}

.gnb{background:#3b4962;}
.gnb .wrap{display:flex;justify-content:space-between;align-items:center;}
.gnb_left ul,.gnb_right ul{display:flex;}
.gnb_left ul li a,.gnb_right ul li a{display:block;padding:12px 16px;color:#fff;font-size:13px;}
.gnb_left ul li a:hover,.gnb_right ul li a:hover{background:rgba(255,255,255,0.1);}

.header_main{border-bottom:1px solid #eee;}
.header_main .wrap{display:flex;align-items:center;justify-content:space-between;}

.logo{flex:0 0 auto;}
.logo h1{padding:22px 0;font-size:24px;font-weight:700;color:#3b4962;letter-spacing:-1px;white-space:nowrap;}
.logo h1 a{display:inline-block;}
.logo h1 .brand{display:inline-block;padding-right:14px;border-right:2px solid #06c2c4;color:#153979;}

/* === 메뉴 === */
.menu{flex:1;margin-left:40px;}
.menu ul{list-style:none;}
.menu > ul{display:flex;justify-content:flex-end;gap:10px;}
.menu > ul > li{position:relative;text-align:center;}
.menu > ul > li > a{
  display:block;padding:30px 22px;font-size:17px;font-weight:600;color:#222;
  transition:color 0.25s;
}
.menu > ul > li:hover > a{color:#06c2c4;}
.menu > ul > li > a:after{
  content:'';display:block;width:0;height:3px;background:#06c2c4;
  margin:6px auto -6px;transition:width 0.3s;
}
.menu > ul > li:hover > a:after{width:70%;}

/* === 서브메뉴 (드롭다운) === */
.submenu{
  position:absolute;top:100%;left:50%;
  transform:translateX(-50%) translateY(10px);
  min-width:180px;background:#fff;
  border:1px solid #e0e0e0;border-top:3px solid #06c2c4;
  border-radius:0 0 6px 6px;
  box-shadow:0 8px 20px rgba(0,0,0,0.08);
  padding:8px 0;opacity:0;visibility:hidden;
  transition:all 0.25s ease;z-index:100;
}
.has-sub:hover .submenu,
.has-sub:focus-within .submenu{
  opacity:1;visibility:visible;
  transform:translateX(-50%) translateY(0);
}
.submenu li a{
  display:block;padding:10px 20px;font-size:14px;color:#555;
  white-space:nowrap;transition:all 0.2s;
}
.submenu li a:hover{background:#f0fbfb;color:#06c2c4;padding-left:25px;}

/* =========================================================
   FOOTER
========================================================= */
#footer{background:#2b2e38;color:#bdbdbd;}
.footer_top{border-bottom:1px solid #3a3d47;}
.footer_top .wrap{display:flex;justify-content:space-between;align-items:center;height:54px;}
.footer_top a{display:inline-block;padding:0 18px;font-size:13px;color:#ddd;border-right:1px solid #3a3d47;line-height:14px;}
.footer_top a:first-child{padding-left:0;font-weight:700;color:#fff;}
.footer_top a:last-child{border-right:0;}
.footer_top .family select{padding:6px 10px;background:#1f2229;color:#fff;border:1px solid #3a3d47;font-size:13px;}

.footer_info{padding:32px 0;}
.footer_info .logo_f{font-size:20px;font-weight:700;color:#fff;margin-bottom:14px;}
.footer_info address{font-style:normal;font-size:13px;line-height:1.9;color:#bdbdbd;}
.footer_info address span{display:inline-block;margin-right:18px;}
.footer_info .copy{margin-top:14px;font-size:12px;color:#888;}

/* =========================================================
   RESPONSIVE (헤더/푸터 공통)
========================================================= */
@media screen and (max-width:1200px){
  .wrap{width:100%;padding:0 15px;}
  .menu{margin-left:20px;}
  .menu > ul > li > a{padding:30px 14px;font-size:15px;}
}
@media screen and (max-width:900px){
  .header_main .wrap{flex-wrap:wrap;}
  .logo{flex:1 1 100%;text-align:center;border-bottom:1px solid #eee;}
  .logo h1{padding:14px 0;font-size:20px;}
  .menu{flex:1 1 100%;margin-left:0;}
  .menu > ul{flex-direction:column;gap:0;width:100%;justify-content:flex-start;}
  .menu > ul > li{width:100%;border-bottom:1px solid #eee;}
  .menu > ul > li > a{padding:12px 0;}
  .menu > ul > li > a:after{display:none;}
  .submenu{
    position:static;transform:none;opacity:1;visibility:visible;
    box-shadow:none;border:0;border-top:1px solid #f0f0f0;border-radius:0;
    padding:5px 0 10px;background:#fafafa;
  }
  .submenu li a{padding:8px 20px;font-size:13px;text-align:center;}
}
@media screen and (max-width:640px){
  .gnb_left{display:none;}
  .footer_top .wrap{flex-wrap:wrap;height:auto;padding:10px 15px;}
  .footer_top a{padding:6px 12px;}
}