:root {
  --wd-subvisual-height: 220px;
  --wd-subvisual-bar-height: 80px;
  --wd-subvisual-area: 1385px;
}

.wd-subvisual { position: relative; width: 100%; height: var(--wd-subvisual-height); z-index: 99; }
.wd-subvisual::before { content: ''; position: absolute; left: 0; bottom: var(--wd-subvisual-bar-height); width: 100%; height: 1px; background: rgba(255,255,255,.17); z-index: 1; }
.wd-subvisual__bg-con { position: absolute; top: 0; left: 0; width: 100%; height: var(--wd-subvisual-height); overflow: hidden; background: #eee; }
.wd-subvisual__bg { width: 100%; height: 100%; background: url('../images/sub-visual-bg.jpg') no-repeat 50% 0 / cover; transform: scale(1.1); transition: transform 5s linear; }
.wd-subvisual__txt-con { position: relative; z-index: 1; width: 100%; height: 100%; text-align: center; letter-spacing: -.045em; color: var(--wd-text-inverse, #fff); box-sizing: border-box; }
.wd-subvisual__content { position: relative; width: 100%; height: calc(100% - var(--wd-subvisual-bar-height)); margin-bottom: var(--wd-subvisual-bar-height); display: flex; justify-content: center; align-items: center; }
.wd-subvisual__title { font-family: var(--wd-font-primary, 'Pretendard', sans-serif); font-weight: 700; font-size: 3rem; opacity: 0; transform: translateY(30px); transition: all .8s ease-in-out; transition-property: transform, opacity; transition-delay: .3s; }
.wd-subvisual.is-active .wd-subvisual__bg { transform: scale(1) rotate(.002deg); }
.wd-subvisual.is-active .wd-subvisual__title { opacity: 1; transform: translateY(0); }
.wd-subvisual__locbar { position: absolute; bottom: 0; width: 100%; height: var(--wd-subvisual-bar-height); z-index: 9; }
.wd-subvisual__locbar-inner { display: flex; width: 100%; max-width: var(--wd-subvisual-area); height: 100%; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
.wd-subvisual__home-btn { display: flex; align-items: center; justify-content: flex-start; width: var(--wd-subvisual-bar-height); height: var(--wd-subvisual-bar-height); color: var(--wd-text-inverse, #fff); }
.wd-subvisual__home-btn svg { width: 27px; height: 27px; }
.wd-subvisual__drop { position: relative; width: 28rem; height: var(--wd-subvisual-bar-height); }
.wd-subvisual__drop::before { content: ''; position: absolute; top: 50%; left: 0; width: 8px; height: 8px; border-right: 2px solid rgba(255,255,255,.2); border-bottom: 2px solid rgba(255,255,255,.2); transform: translate(-100%,-50%) rotate(-45deg); }
/* 화살표를 absolute 로 띄우면 긴 제목의 말줄임표를 덮는다 → flex 로 나란히 둔다 */
.wd-subvisual__drop-cur { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; height: var(--wd-subvisual-bar-height); padding: 0 8rem 0 4rem; text-align: left; background: none; border: 0; cursor: pointer; box-sizing: border-box; }
.wd-subvisual__drop-cur span { flex: 1 1 auto; min-width: 0; color: var(--wd-text-inverse, #fff); font-weight: 400; font-size: 18px; letter-spacing: -.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wd-subvisual__drop-arrow { flex: 0 0 auto; color: var(--wd-text-inverse, #fff); transition: transform .3s ease; }
.wd-subvisual__drop.is-open .wd-subvisual__drop-arrow { transform: rotate(180deg); }
.wd-subvisual__drop-list { display: none; position: absolute; top: calc(100% - 10px); left: -1px; list-style: none; margin: 0; padding: 10px 0; max-width: 215px; min-width: 160px; background: var(--wd-surface-white, #fff); border: 2px solid var(--wd-primary, #4772e6); border-radius: 16px; box-shadow: 0 1rem 5rem -3px rgba(0,40,147,.16); z-index: 11; }
.wd-subvisual__drop.is-open .wd-subvisual__drop-list { display: block; }
.wd-subvisual__drop-list li a, .wd-subvisual__drop-list li span { display: block; padding: 10px 20px; font-size: 15px; line-height: 1.5; word-break: keep-all; color: #000; }
.wd-subvisual__drop-list li a:hover { color: var(--wd-primary, #4772e6); font-weight: 500; }

@media all and (max-width: 800px) {
  .wd-subvisual__home-btn { display: none; }
  .wd-subvisual__locbar-inner { padding: 0 20px; }
  .wd-subvisual__drop { width: 50%; }
  .wd-subvisual__drop::before { display: none; }
  .wd-subvisual__drop-cur { padding: 0 1.6rem 0 0; gap: 8px; height: var(--wd-subvisual-bar-height); border-right: 1px solid rgba(255,255,255,.17); }
  .wd-subvisual__drop-cur span { font-size: 1.85rem; }
  .wd-subvisual__drop-arrow { width: 18px; height: 18px; }
  .wd-subvisual__title { font-size: 24px; }
}