/* ===== Header CTA Buttons ===== */
.snb_wrap{ display:flex; align-items:center; gap:16px; margin-left:auto; }
#search_top_btn, #search_box_wrap, .my_btn_wrap, .my_btn_wrap *{ display:none !important; }
.member_info_wrap{ display:none !important; }

.btn-cta{
  display:inline-flex; align-items:center; justify-content:center;
  height:44px; padding:0 20px; border-radius:12px;
  font-weight:700; font-size:15px; line-height:1; text-decoration:none;
  border:1.8px solid #2965E6; color:#2965E6;
  transition:transform .06s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  white-space:nowrap; gap:8px;
}
.btn-cta:active{ transform:translateY(1px); }
.btn-outline{ background:#fff; } .btn-outline:hover{ box-shadow:0 4px 14px rgba(41,101,230,.18); }
.btn-solid{ background:#2965E6; color:#fff; border-color:#2965E6; }
.btn-solid:hover{ box-shadow:0 6px 18px rgba(41,101,230,.28); }
.btn-pill{ background:#fff; color:#2965E6; border-color:#2965E6; border-radius:999px; padding:0 22px; }
.btn-pill .icon{ display:inline-flex; }
.btn-pill:hover{ box-shadow:0 4px 14px rgba(41,101,230,.18); }

.cta_btn_wrap{ display:flex; gap:20px; align-items:center; justify-content:flex-end; }
.qm_wrap{ display:flex; gap:10px; align-items:center; }

@media (max-width: 1024px){
  .snb_wrap{ gap:12px; }
  .cta_btn_wrap{ gap:12px; }
  .btn-tableorder{ display:none !important; }
  .btn-solid{ display:none !important; }
  .btn-cta{ height:40px; padding:0 16px; font-size:14px; border-width:1.6px; }
  .gnb_wrap .inner {padding-left: 0px !important; padding-right: 0px !important;}
}

/* =========================================================
   2차메뉴 아래 '박스형 카드'
   ========================================================= */

.rb-subbox-wrap{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:20px;
  padding:10px 0 20px;
}

.rb-subbox{
  position:relative;
  display:block;
  width:100%;
  height:160px;
  border-radius:12px;
  overflow:hidden;
  text-decoration:none;
  box-shadow:0 3px 12px rgba(0,0,0,.06);
  transition:transform .2s ease, box-shadow .25s ease;
}
.rb-subbox:hover{ transform:translateY(-3px); box-shadow:0 8px 20px rgba(0,0,0,.10); }

.rb-subbox .thumb{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  z-index:0;
}

.rb-subbox::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,.38) 40%, rgba(0,0,0,0) 65%);
  z-index:1;
  pointer-events:none;
}

.rb-subbox .txt{
  position:absolute; left:0; right:0; bottom:0;
  padding:6px 14px;
  background:rgba(0,0,0,.45);
  color:#fff;
  display:flex; flex-direction:column; gap:4px;
  z-index:2;
  backdrop-filter:saturate(120%) blur(1px);
}

.rb-subbox .txt .title{
  font-weight:800; font-size:14px; line-height:1.2; margin:0;
}
.rb-subbox .txt .desc{
  font-size:13.5px; line-height:1.45; margin:0; opacity:.95;
}

.rb-subbox .txt .title,
.rb-subbox .txt .desc{
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}

.cbp-hrmenu .cbp-hrsub-inner .rb-subcol{ position:relative; display:block; width:100%; }
.cbp-hrmenu .cbp-hrsub-inner .rb-subcol > .rb-subbox-wrap{ clear:both; width:100%; display:block; margin-top:16px; }

.rb-subbox-wrap.mobile-show{ display:none; }

@media (max-width:1024px){
  .rb-subbox{ height:150px; }
  .rb-subbox-wrap{ grid-template-columns:1fr 1fr; gap:14px; }
  .rb-subbox-wrap.mobile-show{ display:grid; }
}
@media (max-width:640px){
  .rb-subbox{ height:140px; }
  .rb-subbox-wrap{ grid-template-columns:1fr; }
  .btn-pill{ background:#f3f4f5; color:#333; border-color:#f3f4f5; border-radius:5px; padding:0 22px; }
}
@media (max-width: 640px){
  #cbp-hrmenu-btm .rb-subbox-wrap.mobile-show{
    grid-template-columns: 1fr 1fr !important;
    gap: 14px;
  }
  #cbp-hrmenu-btm .rb-subbox{
    height: 120px;
  }
}
@media (max-width: 360px){
  #cbp-hrmenu-btm .rb-subbox-wrap.mobile-show{
    grid-template-columns: 1fr 1fr !important;
  }
  #cbp-hrmenu-btm .rb-subbox{
    height: 132px;
  }
}

/* ===== 상단 배너 스타일 (PC 좌/우 + 모바일 전환) ===== */
.rb-topribbon{
  width:100%;
  /* 여기 배경은 PC에서는 의미 없고, 모바일 기본값 정도로만 사용 */
  background:#000;
  color:#fff;
  line-height:34px;
  min-height:34px;
  font-size:18px;
  letter-spacing:-0.2px;
  position:fixed;
  top:0; left:0; right:0;
  z-index:2000;
}

/* ✅ 상단 배너 안쪽 컨테이너를 항상 100% 폭으로 */
.rb-topribbon .inner{
  width:100% !important;   /* tb_width_inner 값 무시 */
  margin:0;
  overflow:hidden;
  white-space:nowrap;
}

/* PC : 좌우 2분할 */
.rb-topribbon-pc{
  display:flex;
  padding:0;
}
.rb-topribbon-left,
.rb-topribbon-right{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6px 14px;
  font-size:17px;
  text-align:center;
  text-decoration:none;
}

/* 왼쪽 파란색, 오른쪽 검정색 – 항상 반반 */
.rb-topribbon-left{
  background:#2563eb;
  color:#fff;
}
.rb-topribbon-right{
  background:#000;
  color:#fff;
}

.rb-topribbon-left em{
  color:#fff;
  font-weight:700;
}
.rb-topribbon-right em{
  color:#33a0ff;
  font-weight:700;
}

.rb-topribbon-link{ color:inherit; text-decoration:none; }
.rb-topribbon-text{ display:inline-block; }

/* 모바일 단일 배너 */
.rb-topribbon-mo{
  display:none;
  padding:5px 10px;
  text-align:center;
}
.rb-topribbon-link-m{
  display:inline-block;
  color:inherit;
  text-decoration:none;
}
.rb-topribbon-text-m{
  display:inline-block;
}

/* 모바일에서 배경 번갈아 */
.rb-topribbon.rb-mode-blue{
  background:#2563eb;
  color:#fff;
}
.rb-topribbon.rb-mode-blue em{
  color:#fff;
  font-weight:700;
}
.rb-topribbon.rb-mode-black{
  background:#000;
  color:#fff;
}
.rb-topribbon.rb-mode-black em{
  color:#33a0ff;
  font-weight:700;
}

/* PC/모바일 전환 */
@media (max-width:1024px){
  .rb-topribbon{ line-height:32px; min-height:32px; font-size:14.5px; }
  .rb-topribbon-pc{ display:none; }
  .rb-topribbon-mo{ display:block; }
}
@media (min-width:1025px){
  .rb-topribbon-pc{ display:flex; }
  .rb-topribbon-mo{ display:none; }
}

/* 헤더를 배너 높이만큼 아래로 */
:root{ --rbTopRibbonH: 34px; }
#header{ margin-top: var(--rbTopRibbonH); }
@media (max-width:1024px){
  :root{ --rbTopRibbonH: 32px; }
}

/* 모바일 메뉴 전용 로고 블록 */
#cbp-hrmenu-btm .rb-m-logo{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:18px 16px 12px;
  box-sizing:border-box;
  margin-top: 50px;
}
#cbp-hrmenu-btm .rb-m-logo picture,
#cbp-hrmenu-btm .rb-m-logo img{
  display:block;
  max-width:140px;
  width:100%;
  height:auto;
}
#cbp-hrmenu-btm .rb-m-logo:after{
  content:"";
  display:none;
  width:100%;
  height:1px;
  background:rgba(0,0,0,.08);
  margin-top:12px;
}
@media (prefers-color-scheme: dark){
  #cbp-hrmenu-btm .rb-m-logo:after{ background:rgba(255,255,255,.10); }
}