@charset "utf-8";
/* ==========================================================================
   (주)대진유통 - 헤더 / GNB / 모바일 메뉴
   ========================================================================== */

#hd{position:fixed;left:0;top:0;width:100%;z-index:300;background:#fff;border-bottom:1px solid var(--dj-line);transition:background .4s var(--dj-ease),border-color .4s,box-shadow .4s}

/* 상단 정보바 */
.hd_top{border-bottom:1px solid var(--dj-line);height:42px;transition:opacity .35s,border-color .4s}
.hd_top .inner{display:flex;align-items:center;justify-content:space-between;height:42px}
.hd_contact{display:flex;align-items:center;gap:22px}
.hd_contact li{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--dj-txt-2);letter-spacing:-0.02em}
.hd_contact li i{font-size:15px;color:var(--dj-blue-2)}
.hd_contact li a:hover{color:var(--dj-blue);text-decoration:underline}
.hd_top_util{display:flex;align-items:center;gap:18px}
.hd_top_util .hd_time{font-size:13.5px;color:var(--dj-txt-3);letter-spacing:-0.02em}
.hd_top_util .hd_dl{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--dj-blue);transition:.3s}
.hd_top_util .hd_dl i{font-size:15px}
.hd_top_util .hd_dl:hover{color:var(--dj-navy)}

/* 메인 헤더 줄 */
.hd_main .inner{display:flex;align-items:center;height:68px}

/* 로고 락업 : [마크] | (주)대진유통 / DAEJIN SEAFOOD
   업로드된 마크(148x82)에는 한글 사명이 없어 옆에 텍스트로 세운다. */
#logo{flex:0 0 auto;margin-right:38px}
#logo a{display:flex;align-items:center;gap:15px;height:68px}
#logo img{height:54px;width:auto;transition:opacity .35s,filter .35s}
#logo .txt{position:relative;padding-left:16px;font-size:19px;font-weight:800;color:var(--dj-navy);letter-spacing:-0.045em;line-height:1.05;white-space:nowrap;transition:color .35s}
#logo .txt:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:34px;background:var(--dj-line-2);transition:background .35s}
#logo .txt small{display:block;font-size:10px;font-weight:600;letter-spacing:.13em;color:var(--dj-blue-2);margin-top:6px;transition:color .35s}

/* GNB */
#gnb{flex:1 1 auto}
#gnb h2{display:none}
#gnb_1dul{display:flex;align-items:center;gap:6px}
.gnb_1dli{position:relative}
.gnb_1da{position:relative;display:flex;align-items:center;height:68px;padding:0 26px;font-size:17.5px;font-weight:600;color:var(--dj-txt);letter-spacing:-0.035em;transition:color .3s}
.gnb_1da:after{content:"";position:absolute;left:26px;right:26px;bottom:-1px;height:3px;background:var(--dj-blue);transform:scaleX(0);transform-origin:center;transition:transform .38s var(--dj-ease)}
.gnb_1dli:hover .gnb_1da,.gnb_1dli.on .gnb_1da{color:var(--dj-blue)}
.gnb_1dli:hover .gnb_1da:after,.gnb_1dli.on .gnb_1da:after{transform:scaleX(1)}

.gnb_2dul{position:absolute;left:50%;top:100%;transform:translateX(-50%) translateY(10px);min-width:196px;padding:14px 0;background:#fff;border:1px solid var(--dj-line);border-radius:0 0 var(--dj-radius-s) var(--dj-radius-s);box-shadow:var(--dj-shadow);opacity:0;visibility:hidden;transition:all .35s var(--dj-ease)}
.gnb_1dli:hover .gnb_2dul{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.gnb_2dli .gnb_2da{display:block;padding:11px 24px;font-size:15.5px;color:var(--dj-txt-2);white-space:nowrap;text-align:center;transition:.28s}
.gnb_2dli .gnb_2da:hover{background:var(--dj-sky);color:var(--dj-blue);font-weight:600}
.gnb_empty{padding:0 20px;font-size:14px;color:var(--dj-txt-3);line-height:68px}
.gnb_empty a{color:var(--dj-blue);text-decoration:underline}
#gnb_all{display:none}

/* 우측 CTA */
.hd_cta{flex:0 0 auto;display:flex;align-items:center;gap:10px;margin-left:20px}
.hd_cta .dj-btn{height:46px;padding:0 22px;font-size:15px}

/* 모바일 메뉴 버튼 */
#mb-open-menu{display:none;flex:0 0 auto;width:44px;height:44px;margin-left:auto;position:relative}
#mb-open-menu span{position:absolute;left:11px;width:22px;height:2px;background:var(--dj-navy);border-radius:2px;transition:all .3s var(--dj-ease)}
#mb-open-menu span.line1{top:15px}
#mb-open-menu span.line2{top:21px}
#mb-open-menu span.line3{top:27px}

/* index 상단 투명 헤더 */
body.is-index #hd{background:transparent;border-bottom-color:rgba(255,255,255,.18);box-shadow:none}
body.is-index #hd .hd_top{border-bottom-color:rgba(255,255,255,.18)}
body.is-index #hd .hd_contact li,
body.is-index #hd .hd_top_util .hd_time{color:rgba(255,255,255,.8)}
body.is-index #hd .hd_contact li i{color:#fff}
body.is-index #hd .hd_top_util .hd_dl{color:#fff}
body.is-index #hd .gnb_1da{color:#fff}
body.is-index #hd #logo .txt{color:#fff}
body.is-index #hd #logo .txt small{color:rgba(255,255,255,.72)}
body.is-index #hd #logo .txt:before{background:rgba(255,255,255,.35)}
body.is-index #hd #logo img{filter:brightness(0) invert(1)}
body.is-index #hd #mb-open-menu span{background:#fff}
body.is-index #hd .hd_cta .dj-btn.primary{background:#fff;color:var(--dj-blue)}
body.is-index #hd .gnb_1dli:hover .gnb_1da{color:#fff}
body.is-index #hd .gnb_1dli:hover .gnb_1da:after{background:#fff}

/* 스크롤 시 */
#hd.scroll_bg{box-shadow:0 4px 20px rgba(14,44,87,.08)}
#hd.scroll_bg .hd_top{height:0;overflow:hidden;opacity:0;border-bottom:0}
#hd.scroll_bg .hd_top .inner{height:0}
body.is-index #hd.scroll_bg{background:#fff;border-bottom-color:var(--dj-line)}
body.is-index #hd.scroll_bg .gnb_1da{color:var(--dj-txt)}
body.is-index #hd.scroll_bg #logo .txt{color:var(--dj-navy)}
body.is-index #hd.scroll_bg #logo .txt small{color:var(--dj-blue-2)}
body.is-index #hd.scroll_bg #logo .txt:before{background:var(--dj-line-2)}
body.is-index #hd.scroll_bg #logo img{filter:none}
body.is-index #hd.scroll_bg #mb-open-menu span{background:var(--dj-navy)}
body.is-index #hd.scroll_bg .hd_cta .dj-btn.primary{background:var(--dj-blue);color:#fff}
body.is-index #hd.scroll_bg .gnb_1dli:hover .gnb_1da{color:var(--dj-blue)}
body.is-index #hd.scroll_bg .gnb_1dli:hover .gnb_1da:after{background:var(--dj-blue)}

/* --------------------------------------------------------------------------
   팝업레이어 (관리자 > 팝업레이어 관리)
   -------------------------------------------------------------------------- */
#hd_pop{position:relative;z-index:250;margin:0;padding:0}
#hd_pop h2{overflow:hidden;position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;clip:rect(0,0,0,0)}
.hd_pops{position:absolute;border-radius:var(--dj-radius-s);overflow:hidden;box-shadow:0 12px 34px rgba(14,44,87,.24)}
.hd_pops_con{overflow:hidden;background:#fff}
.hd_pops_con img{max-width:100%;height:auto}
.hd_pops_footer{display:flex;align-items:center;justify-content:space-between;background:var(--dj-navy)}
.hd_pops_footer button{padding:11px 14px;color:rgba(255,255,255,.85);font-size:13.5px;transition:.3s}
.hd_pops_footer button:hover{background:rgba(255,255,255,.14);color:#fff}
.hd_pops_footer .hd_pops_close{font-weight:700}

/* --------------------------------------------------------------------------
   모바일 슬라이드 메뉴
   -------------------------------------------------------------------------- */
/* z-index 1300 : bbs/newwin.inc.php 가 #hd 에 인라인으로 z-index:1000 을 넣기 때문에
   그보다 위여야 메뉴가 헤더에 가리지 않는다. (메인 팝업레이어 스크립트, 코어파일이라 수정하지 않음) */
.dj-mb-menu{position:fixed;top:0;right:-320px;width:320px;max-width:86vw;height:100%;background:#fff;z-index:1300;overflow-y:auto;-webkit-overflow-scrolling:touch;transition:right .38s var(--dj-ease);box-shadow:-8px 0 30px rgba(18,48,95,.22)}
.dj-mb-menu.open{right:0}
.dj-mb-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:64px;padding:12px 14px 12px 20px;background:var(--dj-navy)}
.dj-mb-head .tit{font-size:16px;font-weight:700;color:#fff;letter-spacing:-0.03em;white-space:nowrap}
.dj-mb-close{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:44px;height:44px;color:#fff;font-size:26px;line-height:1;border-radius:8px}
.dj-mb-close:active{background:rgba(255,255,255,.14)}
.dj-mb-list > li{border-bottom:1px solid var(--dj-line)}
.dj-mb-list > li > a{display:flex;align-items:center;justify-content:space-between;min-height:54px;padding:15px 20px;font-size:17px;font-weight:700;color:var(--dj-navy);letter-spacing:-0.03em}
.dj-mb-list > li > a:active{background:var(--dj-sky-2)}
.dj-mb-list > li > a i{font-size:18px;color:var(--dj-txt-3);transition:transform .3s}
.dj-mb-list > li.on > a{color:var(--dj-blue)}
.dj-mb-list > li.on > a i{transform:rotate(180deg);color:var(--dj-blue)}
.dj-mb-sub{display:none;background:var(--dj-sky-2);padding:6px 0}
.dj-mb-sub li a{display:block;min-height:46px;padding:13px 20px 13px 34px;font-size:15px;color:var(--dj-txt-2);position:relative}
.dj-mb-sub li a:active{color:var(--dj-blue)}
.dj-mb-sub li a:before{content:"";position:absolute;left:21px;top:22px;width:6px;height:1px;background:var(--dj-txt-3)}
.dj-mb-sub li a:hover{color:var(--dj-blue)}
.dj-mb-foot{padding:24px 22px 40px}
.dj-mb-foot .dj-btn{width:100%}
.dj-mb-foot ul{margin-top:18px}
.dj-mb-foot li{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--dj-txt-2);padding:5px 0}
.dj-mb-foot li i{color:var(--dj-blue-2);font-size:16px}
.dj-mask{display:none;position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(18,48,95,.55);z-index:1290}

/* --------------------------------------------------------------------------
   반응형
   -------------------------------------------------------------------------- */
@media (max-width:1400px){
  .gnb_1da{padding:0 20px;font-size:16.5px}
  .gnb_1da:after{left:20px;right:20px}
  #logo{margin-right:24px}
  #logo a{gap:12px}
  #logo .txt{font-size:18px;padding-left:13px}
}
@media (max-width:1180px){
  .hd_contact li:nth-child(2){display:none}
  .hd_top_util .hd_time{display:none}
  .gnb_1da{padding:0 15px;font-size:16px}
  .gnb_1da:after{left:15px;right:15px}
  .hd_cta .dj-btn{padding:0 16px;font-size:14px}
}
@media (max-width:1024px){
  .hd_top{display:none}
  .hd_main .inner{height:74px}
  #logo a{height:74px}
  #logo img{height:48px}
  #logo .txt{font-size:18px}
  #gnb{display:none}
  /* 로고가 남은 공간을 차지 → CTA·햄버거는 항상 우측 끝에 붙는다.
     (.hd_cta 가 숨겨지는 좁은 화면에서도 햄버거 위치가 유지된다) */
  #logo{margin-right:auto}
  .hd_cta{margin-left:0;margin-right:4px}
  .hd_cta .dj-btn{height:40px;padding:0 16px;font-size:14px}
  #mb-open-menu{display:block;margin-left:0;margin-right:-6px}
  #hd.scroll_bg .hd_top{display:none}
}
@media (max-width:600px){
  :root{--dj-hd-h:64px}
  .hd_main .inner{height:64px}
  #logo a{height:64px;gap:9px}
  #logo img{height:40px}
  #logo .txt{font-size:15.5px;padding-left:10px}
  #logo .txt:before{height:26px}
  #logo .txt small{display:none}
  .hd_cta .dj-btn{height:38px;padding:0 13px;font-size:13px}
  .hd_cta .dj-btn{height:36px;padding:0 13px;font-size:13px}
  .hd_cta .dj-btn i{display:none}
}
@media (max-width:380px){
  /* 공간이 부족해 B2B 버튼만 숨긴다. 우측 정렬은 #logo{margin-right:auto} 가 담당하므로
     버튼이 사라져도 햄버거는 우측 끝에 그대로 있다. */
  .hd_cta{display:none}
  #logo a{gap:8px}
  #logo img{height:36px}
  #logo .txt{font-size:14px;padding-left:9px}
  #logo .txt:before{height:22px}
}

/* 상단 온라인 쇼핑몰 링크 (대진유통) */
.hd_top_util .hd_shop{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--dj-blue);transition:.3s}
.hd_top_util .hd_shop i{font-size:15px}
.hd_top_util .hd_shop:hover{color:var(--dj-navy)}
body.is-index #hd .hd_top_util .hd_shop{color:#fff}
body.is-index #hd.scroll_bg .hd_top_util .hd_shop{color:var(--dj-blue)}
@media (max-width:1280px){ .hd_top_util .hd_shop span{display:none} }

/* 모바일 메뉴 열림 중 배경 스크롤 잠금 (js/dj.js 에서 클래스 토글) */
html.dj-menu-open,body.dj-menu-open{overflow:hidden}
body.dj-menu-open{position:fixed;left:0;width:100%}