@charset "utf-8";
/* =====================================================================
 * 상단 식립개수 배너 스타일
 * (theme/basic/head.sub.php 의 #marine_top_banner 배너 전용)
 * ===================================================================== */

/* 배너가 열려있을 때: 고정메뉴와 본문을 배너 높이(120px)만큼 아래로 밀고, 닫히면 위로 슬라이드업 */
.wrap {
  transition: padding-top 0.6s ease;
}
.menu_wrap_fix {
  transition: top 0.6s ease;
}
body.marine-banner-on .wrap {
  padding-top: 120px;
}
body.marine-banner-on .menu_wrap_fix {
  top: 120px;
}

#marine_top_banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 120px;
  z-index: 1100;
  overflow: hidden;
  background: #0c50b6 url("/image/top/pc_banner.jpg") center center / cover
    no-repeat;
  font-family: "Noto Sans KR", "Malgun Gothic", dotum, sans-serif;
  transition:
    transform 0.6s ease,
    opacity 0.6s ease;
  will-change: transform;
}
#marine_top_banner.marine-closing {
  transform: translateY(-100%);
  opacity: 0;
}

/* 1920 기준 무대(가운데 정렬) */
#marine_banner_stage {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 1920px;
  height: 120px;
}

/* 왼쪽 텍스트 */
#marine_banner_text {
  position: absolute;
  left: 505px;
  top: 50%;
  transform: translateY(-50%);
  line-height: 1.28;
  letter-spacing: -0.5px;
  white-space: nowrap;
}
#marine_banner_text .ln1 {
  font-size: 31px;
}
#marine_banner_text .ln1 .hl {
  color: #ffd200;
  font-weight: 900;
}
#marine_banner_text .ln1 .wt {
  color: #ffffff;
  font-weight: 500;
}
#marine_banner_text .ln2 {
  font-size: 23px;
  color: #ffffff;
  font-weight: 400;
  margin-top: 3px;
}

/* 오른쪽 숫자 (오른쪽 고정 → 카운트되며 '개'는 제자리) */
#marine_banner_num {
  position: absolute;
  right: 470px;
  top: 50%;
  transform: translateY(-50%);
  color: #ffffff;
  white-space: nowrap;
  letter-spacing: -1px;
}
#marine_banner_num .num {
  font-size: 72px;
  font-weight: 900;
  vertical-align: baseline;
}
#marine_banner_num .gae {
  font-size: 34px;
  font-weight: 500;
  margin-left: 8px;
}

/* 우측 컨트롤 (오늘하루 안보기 + 닫기) */
#marine_banner_ctrl {
  position: absolute;
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 5;
}
#marine_banner_today {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #ffffff;
  font-size: 13px;
  opacity: 0.92;
  cursor: pointer;
  user-select: none;
}
#marine_banner_today input {
  width: 15px;
  height: 15px;
  cursor: pointer;
  margin: 0;
}
/* 모바일 전용 짧은 라벨은 PC에서 숨김 (모바일 CSS에서 다시 표시) */
#marine_banner_today .marine-lbl-mo {
  display: none;
}
#marine_banner_close {
  background: transparent;
  border: 0;
  color: #ffffff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
  opacity: 0.9;
  transition:
    opacity 0.2s,
    transform 0.2s;
}
#marine_banner_close:hover {
  opacity: 1;
  transform: scale(1.12);
}

/* 글자 blur 등장 효과 */
.marine-blur-in {
  opacity: 0;
  filter: blur(14px);
  transform: translateY(8px);
  transition:
    opacity 0.9s ease,
    filter 0.9s ease,
    transform 0.9s ease;
}
.marine-blur-in.show {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

/* 1920보다 좁은 화면 대응(무대가 가운데 정렬되어 양옆이 잘림) */
@media (max-width: 1500px) {
  #marine_banner_text {
    left: 405px;
  }
  #marine_banner_num {
    right: 320px;
  }
}