@charset "utf-8";
/* ===========================================================
   예성골프 영카트 테마 — style.css
   레이아웃 / 헤더 / 히어로 / 섹션 / 푸터
   상품 리스트 스타일은 css/product.css
   =========================================================== */

/* ---------- base ---------- */
body { margin:0; background:#fff; font-family:Pretendard,'Apple SD Gothic Neo',sans-serif; color:#111; -webkit-font-smoothing:antialiased; }
* { box-sizing:border-box; }
a { color:inherit; text-decoration:none; }
a:hover { color:#C2A15B; }
ul, li { list-style:none; margin:0; padding:0; }
button { font-family:inherit; cursor:pointer; }
img { border:0; }

/* ---------- layout ---------- */
.yg-inner { max-width:1300px; margin:0 auto; padding:0; }
.yg-inner-wide { max-width:1600px; margin:0 auto; padding:0 40px; }
.yg-section { padding-top:78px; }
.yg-h2 { margin:0; text-align:center; font-size:30px; font-weight:800; letter-spacing:-.035em; }
.yg-h2-en { margin:0; text-align:center; font-size:26px; font-weight:800; letter-spacing:.16em; }
.yg-sub { margin:14px 0 0; text-align:center; font-size:14px; color:#8B8B8B; letter-spacing:-.02em; }
.yg-more { display:flex; justify-content:center; margin-top:46px; }
.yg-more a { border:1px solid #DDD; font-size:14px; font-weight:600; letter-spacing:-.02em; padding:14px 34px; }

/* ---------- 상단 알림바 ---------- */
#tnb { 
    background:#111; 
	color:#9C9C9C; 
	font-size:12px; 
	letter-spacing:-.01em; 
	display:flex; 
	align-items:center; 
	overflow:hidden; 
    position: relative;
    height: 40px;
    z-index: 100;
    width: 100%; 
}
.tnb-roll { display:flex; align-items:center; gap:100px; padding: 0 40px; white-space:nowrap; }

/* ---------- 헤더 ---------- */
#hd { position:relative; z-index:60; background:#fff; border-bottom:1px solid #ECECEC; }
.hd-row { max-width:1600px; margin:0 auto; padding:0 40px; height:78px; display:flex; align-items:center; gap:36px; }

.hd-burger { border:0; background:none; padding:0; width:24px; flex-shrink:0; display:flex; flex-direction:column; gap:5px; }
.hd-burger span { display:block; height:2px; background:#111; transition:transform .3s ease, opacity .2s ease; }
.hd-burger.is-open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hd-burger.is-open span:nth-child(2) { opacity:0; }
.hd-burger.is-open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

.hd-logo { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.hd-logo-txt { display:flex; flex-direction:column; line-height:1; }
.hd-logo-txt b { font-size:21px; font-weight:800; letter-spacing:.16em; color:#111; }
.hd-logo-txt i { font-style:normal; font-size:9px; font-weight:600; letter-spacing:.42em; color:#C2A15B; margin-top:4px; }

#gnb { display:flex; align-items:center; gap:40px; /*margin-left:24px*/; flex-shrink:0; }
#gnb > a, .gnb-item > a { font-size:16px; font-weight:600; letter-spacing:-.02em; white-space:nowrap; }
#gnb > a.is-strong { font-weight:800; letter-spacing:-.01em; }
.gnb-item { position:relative; }
.gnb-item > a { display:block; padding:28px 0; }
.gnb-sub { display:none; position:absolute; top:100%; left:-24px; min-width:170px; background:#fff; border:1px solid #ECECEC; box-shadow:0 18px 40px rgba(0,0,0,.10); padding:14px 0; }
.gnb-item:hover .gnb-sub { display:block; }
.gnb-sub a { display:block; padding:9px 24px; font-size:14px; color:#444; }

.hd-util { margin-left:auto; flex-shrink:0; display:flex; align-items:center; gap:22px; }
.hd-b2b { background:#111; color:#fff; font-size:14px; font-weight:700; letter-spacing:-.02em; padding:12px 24px; border-radius:999px; white-space:nowrap; }
.hd-b2b:hover { color:#fff; }
.hd-icon { border:0; background:none; padding:0; display:flex; align-items:center; position:relative; }
.hd-cart-num { position:absolute; top:-7px; right:-8px; min-width:17px; height:17px; background:#C2A15B; color:#fff; border-radius:999px; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; padding:0 4px; }

/* ---------- 전체메뉴 / 검색 공통 패널 ---------- */
.hd-panel { position:absolute; left:0; right:0; top:100%; background:#fff; border-bottom:1px solid #ECECEC; overflow:hidden; max-height:0; opacity:0; transition:max-height .4s ease, opacity .25s ease; }
.hd-panel.is-open { opacity:1; }
#allmenu { z-index:64; box-shadow:0 22px 40px rgba(0,0,0,.10); }
#hdsearch { z-index:65; box-shadow:0 18px 34px rgba(0,0,0,.08); }

/* 전체메뉴 */
.allmenu-grid { max-width:1300px; margin:0 auto; padding:44px 20px 40px; display:grid; grid-template-columns:repeat(5,1fr); gap:36px; }
.allmenu-tit { margin:0 0 20px; padding-bottom:14px; border-bottom:2px solid #111; font-size:15px; font-weight:800; letter-spacing:-.02em; }
.allmenu-list { display:flex; flex-direction:column; gap:12px; }
.allmenu-list a { font-size:13.5px; color:#555; letter-spacing:-.02em; }
.allmenu-b2b { background:#F5F5F5; padding:28px 26px; display:flex; flex-direction:column; }
.allmenu-b2b h3 { margin:0; font-size:15px; font-weight:800; letter-spacing:-.02em; }
.allmenu-b2b p { margin:12px 0 0; font-size:13px; line-height:1.7; color:#777; letter-spacing:-.02em; }
.allmenu-btns { margin-top:20px; display:flex; flex-direction:column; gap:10px; }
.allmenu-btns a { font-size:13px; letter-spacing:-.02em; padding:12px 0; text-align:center; }
.allmenu-btns a.is-fill { background:#111; color:#fff; font-weight:700; }
.allmenu-btns a.is-line { border:1px solid #D5D5D5; background:#fff; font-weight:600; }
.allmenu-cs { margin-top:22px; padding-top:18px; border-top:1px solid #E2E2E2; }
.allmenu-cs .lb { margin:0; font-size:11px; font-weight:700; letter-spacing:.1em; color:#9A9A9A; }
.allmenu-cs .tel { margin:8px 0 0; font-size:17px; font-weight:800; letter-spacing:-.02em; color:#111; }
.allmenu-cs .time { margin:6px 0 0; font-size:12px; color:#888; letter-spacing:-.02em; }

/* 검색 */
.search-box { max-width:1300px; margin:0 auto; padding:28px 20px 26px; }
.search-form { display:flex; align-items:center; gap:14px; border-bottom:2px solid #111; padding-bottom:14px; }
.search-form svg { flex-shrink:0; }
.search-form input { flex:1; min-width:0; border:0; outline:none; background:none; font-family:inherit; font-size:19px; font-weight:600; letter-spacing:-.03em; color:#111; padding:4px 0; }
.search-submit { flex-shrink:0; border:0; background:#111; color:#fff; font-size:14px; font-weight:700; letter-spacing:-.02em; padding:12px 26px; white-space:nowrap; }
.search-close { flex-shrink:0; border:0; background:none; padding:6px; display:flex; }

/* ---------- 히어로 ---------- */
#hero { position:relative; background:#0C0C0C; height:560px; overflow:hidden; }
.hero-slide { position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .7s ease; }
.hero-slide.is-active { opacity:1; pointer-events:auto; }
.hero-visual { position:absolute; inset:0 0 0 42%; }
.hero-visual img { width:100%; height:100%; object-fit:cover; display:block; }
.hero-dim { position:absolute; inset:0; background:linear-gradient(90deg,#0C0C0C 34%,rgba(12,12,12,.85) 46%,rgba(12,12,12,0) 68%); pointer-events:none; }
.hero-copy { position:absolute; inset:0; max-width:1600px; margin:0 auto; padding:0 40px; display:flex; flex-direction:column; justify-content:center; pointer-events:none; }
.hero-tag { display:inline-block; width:fit-content; border:1px solid rgba(255,255,255,.35); color:#DEDEDE; font-size:11px; font-weight:600; letter-spacing:.18em; padding:7px 14px; }
.hero-copy h1 { margin:26px 0 0; color:#fff; font-size:52px; line-height:1.24; font-weight:800; letter-spacing:-.035em; }
.hero-copy > p { margin:22px 0 0; color:#B7B7B7; font-size:16px; line-height:1.7; letter-spacing:-.02em; }
.hero-btns { display:flex; gap:12px; margin-top:34px; pointer-events:auto; }
.hero-btns a { font-size:15px; font-weight:700; letter-spacing:-.02em; padding:15px 30px; }
.hero-btns a.is-fill { background:#fff; color:#111; }
.hero-btns a.is-line { border:1px solid rgba(255,255,255,.5); color:#fff; }
.hero-nav { position:absolute; left:0; right:0; bottom:44px; max-width:1600px; margin:0 auto; padding:0 40px; display:flex; align-items:center; gap:16px; z-index:5; }
.hero-nav .now { color:#fff; font-size:12px; letter-spacing:.1em; width:14px; }
.hero-nav .total { color:rgba(255,255,255,.5); font-size:12px; letter-spacing:.1em; }
.hero-track { display:block; position:relative; width:170px; height:2px; background:rgba(255,255,255,.25); }
.hero-track span { position:absolute; left:0; top:0; bottom:0; width:33.3%; background:#fff; transition:width .5s ease; }

/* ---------- 브랜드 스트립 ---------- */
#brands { background:#161616; border-top:1px solid rgba(255,255,255,.08); }
.brands-row { max-width:1600px; margin:0 auto; padding:26px 40px; display:flex; align-items:center; gap:34px; }
.brands-lb { display:flex; flex-direction:column; line-height:1.35; flex-shrink:0; }
.brands-lb span { color:#7A7A7A; font-size:10px; font-weight:600; letter-spacing:.22em; }
.brands-list { flex:1; display:grid; grid-template-columns:repeat(8,1fr); gap:12px; white-space:nowrap; }
.brands-list a { display:flex; align-items:center; gap:10px; color:#C9C9C9; font-size:13px; letter-spacing:-.01em; }
.brands-mark { width:30px; height:30px; border-radius:999px; border:1px solid rgba(255,255,255,.28); color:#EDEDED; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.brands-list a.is-lead { color:#fff; }
.brands-list a.is-lead .brands-mark { background:#fff; color:#111; border-color:#fff; }

/* ---------- 퀵메뉴 ---------- */
.quick { max-width:1300px; margin:0 auto; padding:56px 20px 0; }
.quick-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:1px; background:#ECECEC; border:1px solid #ECECEC; }
.quick-grid a { position:relative; background:#fff; padding:26px 8px 20px; display:flex; flex-direction:column; align-items:center; gap:14px; font-size:13px; letter-spacing:-.02em; color:#333; text-align:center; transition:background .25s ease, color .25s ease; }
.quick-grid a svg { transition:transform .25s ease; }
.quick-grid a svg [stroke="#111"], .quick-grid a svg path, .quick-grid a svg circle, .quick-grid a svg rect { transition:stroke .25s ease; }
.quick-grid a::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:#C2A15B; transform:scaleX(0); transform-origin:center; transition:transform .3s ease; }

.quick-grid a:hover { background:#FAF7F1; color:#111; }
.quick-grid a:hover svg { transform:translateY(-3px); }
.quick-grid a:hover svg [stroke="#111"] { stroke:#C2A15B; }
.quick-grid a:hover::after { transform:scaleX(1); }

.quick-grid a.is-dark { background:#111; color:#fff; font-weight:600; }
.quick-grid a.is-dark:hover { background:#000; color:#fff; }
.quick-grid a.is-dark:hover svg [stroke="#fff"] { stroke:#C2A15B; }

/* ---------- 도매 배너 ---------- */
#band { position:relative; margin-top:78px; height:172px; background:#111; overflow:hidden; }
.band-bg { position:absolute; inset:0; opacity:.42; }
.band-bg img { width:100%; height:100%; object-fit:cover; display:block; }
.band-dim { position:absolute; inset:0; /*background:linear-gradient(90deg,#111 18%,rgba(17,17,17,.55) 55%,rgba(17,17,17,.75));*/ pointer-events:none; }
.band-row { position:absolute; inset:0; max-width:1600px; margin:0 auto; padding:0 40px; display:flex; align-items:center; justify-content:space-between; gap:40px; }
.band-txt { pointer-events:none; }
.band-txt strong { display:block; color:#fff; font-size:25px; font-weight:800; letter-spacing:-.035em; }
.band-txt span { display:block; margin-top:14px; color:#B0B0B0; font-size:14px; letter-spacing:-.02em; }
.band-btn { flex-shrink:0; white-space:nowrap; background:#fff; color:#111; font-size:15px; font-weight:700; letter-spacing:-.02em; padding:17px 30px; }

/* ---------- 탭 ---------- */
.tabs { display:flex; justify-content:center; gap:8px; margin:26px 0 40px; }
.tabs button { border:0; background:#F1F1F1; color:#555; font-size:13px; font-weight:600; letter-spacing:-.02em; padding:10px 22px; border-radius:999px; }
.tabs button.is-on { background:#111; color:#fff; }
.best-panels { margin-top:36px; }
.best-panel { display:none; }
.best-panel.is-on { display:block; }

/* ---------- 기획전 ---------- */
.plan-grid { margin-top:36px; display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.plan-card { position:relative; display:block; aspect-ratio:16/7; background:#111; overflow:hidden; }
.plan-card > .bg { position:absolute; inset:0; display:block; }
.plan-card > .bg img { width:100%; height:100%; object-fit:cover; display:block; }
.plan-card > .dim { position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.15)); pointer-events:none; }
.plan-card > .txt { position:absolute; left:38px; top:50%; transform:translateY(-50%); pointer-events:none; }
.plan-card .lb { display:block; margin:0; color:#D8D8D8; font-size:11px; font-weight:600; letter-spacing:.2em; }
.plan-card .tit { display:block; margin:16px 0 0; color:#fff; font-size:25px; font-weight:800; line-height:1.35; letter-spacing:-.035em; }
.dots { display:flex; justify-content:center; align-items:center; gap:9px; margin-top:26px; }
.dots button { border:0; padding:0; width:7px; height:7px; border-radius:999px; background:#D6D6D6; }
.dots button.is-on { background:#111; }

/* ---------- EVENT ---------- */
#event { margin-top:78px; background:#F5F5F5; padding:70px 0 78px; }
.event-grid { margin-top:40px; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.event-card { position:relative; display:block; aspect-ratio:3/2.5; background:#111; overflow:hidden; }
.event-card > .bg { position:absolute; inset:0; display:block; }
.event-card > .bg img { width:100%; height:100%; object-fit:cover; display:block; }
.event-card > .dim { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,.05) 55%,rgba(0,0,0,.55)); pointer-events:none; }
.event-card > .txt { position:absolute; inset:0; padding:32px; display:flex; flex-direction:column; justify-content:space-between; pointer-events:none; }
.event-card .lb { display:block; margin:0; color:#D5D5D5; font-size:12px; letter-spacing:-.01em; }
.event-card .tit { display:block; margin:14px 0 0; color:#fff; font-size:23px; font-weight:800; line-height:1.38; letter-spacing:-.035em; }
.event-card .date { display:block; margin:0; color:#BBB; font-size:12px; }

/* ---------- Q&A / 공지 ---------- */
.qa-grid { display:grid; grid-template-columns:1.35fr 1fr; gap:22px; }
.qa-card { position:relative; background:#F5F5F5; padding:42px 44px; overflow:hidden; }
.qa-watermark { position:absolute; right:-10px; bottom:14px; font-size:88px; font-weight:800; color:#EAEAEA; letter-spacing:-.04em; pointer-events:none; z-index:0; }
.qa-card .tit { margin:0; font-size:22px; font-weight:800; letter-spacing:-.035em; position:relative; }
.qa-card .sub { margin:12px 0 0; font-size:13px; color:#8B8B8B; letter-spacing:-.02em; position:relative; }
.qa-ask { margin-top:30px; display:flex; gap:18px; align-items:center; position:relative; }
.qa-ask-ico { width:66px; height:66px; border-radius:999px; background:#E4E4E4; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.qa-ask-list { flex:1; display:flex; flex-direction:column; gap:10px; }
.qa-ask-list a { background:#fff; border-radius:999px; padding:13px 22px; font-size:13px; color:#555; letter-spacing:-.02em; }
.qa-side { display:grid; grid-template-rows:1fr 1fr; gap:22px; }
.qa-link { padding:32px 34px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.qa-link .tit { display:block; font-size:19px; font-weight:800; letter-spacing:-.03em; }
.qa-link .sub { display:block; margin-top:12px; font-size:13px; letter-spacing:-.02em; }
.qa-link .arw { width:38px; height:38px; border-radius:999px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.qa-link.is-dark { background:#111; }
.qa-link.is-dark .tit { color:#fff; }
.qa-link.is-dark .sub { color:#9E9E9E; }
.qa-link.is-dark .arw { background:#fff; }
.qa-link.is-gray { background:#E9E9E9; }
.qa-link.is-gray .tit { color:#111; }
.qa-link.is-gray .sub { color:#6E6E6E; }
.qa-link.is-gray .arw { background:#111; }

/* ---------- 공급 시스템 ---------- */
.supply { margin-top:22px; background:#F5F5F5; padding:40px 44px; display:grid; grid-template-columns:290px 1fr; gap:40px; align-items:center; }
.supply-tit { margin:0; font-size:19px; font-weight:800; letter-spacing:-.03em; }
.supply-sub { margin:12px 0 0; font-size:13px; color:#8B8B8B; letter-spacing:-.02em; }
.supply-sub strong { color:#111; font-weight:700; }
.supply-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.supply-step { display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; }
.supply-step .ico { width:46px; height:46px; border-radius:999px; background:#fff; display:flex; align-items:center; justify-content:center; }
.supply-step .nm { font-size:12px; color:#666; letter-spacing:-.02em; }
.supply-step .tag { background:#111; color:#fff; font-size:11px; font-weight:600; padding:5px 12px; }

/* ---------- 푸터 ---------- */
#ft_new { margin-top:50px; background:#111; color:#8C8C8C; }
.ft-inner { max-width:1300px; margin:0 auto; padding:56px 0px 44px; }
.ft-logo { display:flex; align-items:center; gap:10px; }
.ft-logo-txt { display:flex; flex-direction:column; line-height:1; }
.ft-logo-txt b { font-size:18px; font-weight:800; letter-spacing:.16em; color:#fff; }
.ft-logo-txt i { font-style:normal; font-size:8px; font-weight:600; letter-spacing:.42em; color:#C2A15B; margin-top:4px; }
.ft-links { display:flex; flex-wrap:wrap; gap:26px; margin-top:32px; font-size:13px; letter-spacing:-.02em; }
.ft-links a { color:#B0B0B0; }
.ft-links a.is-strong { color:#fff; font-weight:700; }
.ft-info { margin-top:26px; padding-top:26px; border-top:1px solid rgba(255,255,255,.12); display:grid; grid-template-columns:1.3fr 1fr; gap:40px; font-size:12.5px; line-height:2; letter-spacing:-.02em; }
.ft-info p { margin:0; }
.ft-info .bar { color:#4E4E4E; }
.ft-info .wh { color:#fff; }
.ft-copy { margin:34px 0 0; font-size:11px; letter-spacing:.1em; color:#575757; }

/* ===========================================================
   반응형
   =========================================================== */
@media (max-width:1300px) {
  .hd-row { padding:0 20px; height:64px; gap:18px; }
  /*#gnb { display:none; }*/
  .yg-inner-wide { padding:0 20px; }
  .yg-section { padding-top:56px; }
  .tnb-roll { gap:26px; padding-left:20px; }

  .allmenu-grid { grid-template-columns:repeat(2,1fr); gap:28px; padding:28px 20px; }
  .allmenu-b2b { grid-column:1 / -1; padding:22px; }

  .brands-row { padding:20px; flex-direction:column; align-items:flex-start; gap:16px; }
  .brands-list { width:100%; grid-template-columns:repeat(4,1fr); gap:16px 10px; }

  #hero { height:480px; }
  .hero-visual { inset:0; }
  .hero-dim { background:linear-gradient(180deg,rgba(0,0,0,.40),rgba(0,0,0,.82)); }
  .hero-copy { padding:0 20px; }
  .hero-copy h1 { font-size:38px; }
  .hero-nav { padding:0 20px; bottom:28px; }

  .quick { padding:44px 20px 0; }
  .quick-grid { grid-template-columns:repeat(4,1fr); }

  #band { height:auto; margin-top:56px; padding:38px 0; }
  .band-row { position:static; flex-direction:column; align-items:flex-start; gap:22px; padding:0 20px; }

  #event { margin-top:56px; padding:52px 0 56px; }
  .qa-grid { grid-template-columns:1fr; }
  .qa-watermark { display:none; }
  .supply { grid-template-columns:1fr; gap:26px; padding:32px 24px; }
  .ft-info { grid-template-columns:1fr; gap:18px; }
}

@media (max-width:1000px) {
	#tnb{ display: none}
}

@media (max-width:720px) {
  #tnb { font-size:11px; }
  .yg-h2 { font-size:22px; }
  .yg-h2-en { font-size:20px; }
  .yg-more { margin-top:32px; }

  .hd-b2b { display:none; }
  .hd-util { gap:18px; }
  .search-box { padding:20px; }
  .search-form input { font-size:16px; }
  .search-submit { display:none; }
  .allmenu-grid { grid-template-columns:1fr; gap:22px; }

  .brands-list { grid-template-columns:repeat(2,1fr); }

  #hero { height:440px; }
  .hero-copy h1 { font-size:29px; }
  .hero-copy > p { font-size:14px; }
  .hero-btns { flex-wrap:wrap; gap:10px; }
  .hero-btns a { padding:13px 22px; font-size:14px; }

  .quick-grid { grid-template-columns:repeat(3,1fr); }
  .quick-grid a { padding:20px 6px 16px; gap:10px; font-size:12px; }

  .band-txt strong { font-size:20px; }
  .tabs { flex-wrap:wrap; }
  .plan-grid, .event-grid { grid-template-columns:1fr; }
  .event-card { aspect-ratio:4/3; }
  .event-card > .txt { padding:24px; }
  .qa-card { padding:28px 22px; }
  .qa-link { padding:26px 22px; }
  .supply-steps { grid-template-columns:repeat(2,1fr); gap:22px 12px; }
  .ft-inner { padding:44px 20px 36px; }
  .ft-links { gap:14px 20px; }
}