#header {padding-top: 0; padding-bottom: 0; background-color: rgba(255, 255, 255, 0.6) !important; box-shadow: none;}
.co_header_ffffff #header {border-bottom: 0 !important;}
#header {position: fixed;}
header {left: 0; transition: background-color 250ms ease-in-out, box-shadow 250ms ease-in-out;}
#header.scrolled,
#header.rb-mega-open {
    background-color: #fff !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Main/brand pre-scroll white treatment */
#header.header-prewhite:not(.scrolled):not(.rb-mega-open),
#header.header-prewhite:not(.scrolled):not(.rb-mega-open) * {color: #fff !important;}

#header.header-prewhite:not(.scrolled):not(.rb-mega-open),
#header.header-prewhite:not(.scrolled):not(.rb-mega-open) .gnb_wrap,
#header.header-prewhite:not(.scrolled):not(.rb-mega-open) .rows_gnb_wrap,
#header.header-prewhite:not(.scrolled):not(.rb-mega-open) .rows_gnb_wrap2,
#header.header-prewhite:not(.scrolled):not(.rb-mega-open) .row_gnbs,
#header.header-prewhite:not(.scrolled):not(.rb-mega-open) nav,
#header.header-prewhite:not(.scrolled):not(.rb-mega-open) .main_menu,
#header.header-prewhite:not(.scrolled):not(.rb-mega-open) .main_rb_bg,
#header.header-prewhite:not(.scrolled):not(.rb-mega-open) .login_wrap,
#header.header-prewhite:not(.scrolled):not(.rb-mega-open) .menu_wrap,
#header.header-prewhite:not(.scrolled):not(.rb-mega-open) .header-logo,
#header.header-prewhite:not(.scrolled):not(.rb-mega-open) .header-auth,
#header.header-prewhite:not(.scrolled):not(.rb-mega-open) .tog_wrap,
#header.header-prewhite:not(.scrolled):not(.rb-mega-open) .tog_wrap2 {background: transparent !important; box-shadow: none !important;}

#header.header-prewhite:not(.scrolled):not(.rb-mega-open) .cbp-hrsub,
#header.header-prewhite:not(.scrolled):not(.rb-mega-open) .cbp-hrsub-inner,
#header.header-prewhite:not(.scrolled):not(.rb-mega-open) .cbp-hrsub ul,
#header.header-prewhite:not(.scrolled):not(.rb-mega-open) .cbp-hrmenu > ul > li > a,
#header.header-prewhite:not(.scrolled):not(.rb-mega-open) .cbp-hrmenu li,
#header.header-prewhite:not(.scrolled):not(.rb-mega-open) .main_menu a,
#header.header-prewhite:not(.scrolled):not(.rb-mega-open) .login_wrap button,
#header.header-prewhite:not(.scrolled):not(.rb-mega-open) button,
#header.header-prewhite:not(.scrolled):not(.rb-mega-open) .search_top_wrap_inner,
#header.header-prewhite:not(.scrolled):not(.rb-mega-open) .auth-menu,
#header.header-prewhite:not(.scrolled):not(.rb-mega-open) .auth-link,
#header.header-prewhite:not(.scrolled):not(.rb-mega-open) .row_gnbs nav a,
#header.header-prewhite:not(.scrolled):not(.rb-mega-open) nav.top-menu a {background: transparent !important; box-shadow: none !important;}

#header.header-prewhite:not(.scrolled):not(.rb-mega-open) .main_menu a.on {border-bottom-color: #fff !important;}

#header.header-prewhite:not(.scrolled):not(.rb-mega-open) img:not(.speech_bubble),
#header.header-prewhite:not(.scrolled):not(.rb-mega-open) svg,
#header.header-prewhite:not(.scrolled):not(.rb-mega-open) svg path,
#header.header-prewhite:not(.scrolled):not(.rb-mega-open) svg circle,
#header.header-prewhite:not(.scrolled):not(.rb-mega-open) svg rect,
#header.header-prewhite:not(.scrolled):not(.rb-mega-open) svg line,
#header.header-prewhite:not(.scrolled):not(.rb-mega-open) svg polyline,
#header.header-prewhite:not(.scrolled):not(.rb-mega-open) svg polygon {filter: brightness(0) invert(1) !important; fill: #fff !important; stroke: #fff !important;}

#header.header-prewhite:not(.scrolled):not(.rb-mega-open) img.speech_bubble {filter: none !important; fill: initial !important; stroke: initial !important;}

#header.header-prewhite .rb-mega-panel {color: #111 !important;}
#header.header-prewhite .rb-mega-panel .rb-mega-title {color: #111 !important;}
#header.header-prewhite .rb-mega-panel .rb-mega-list a {color: #646464 !important;}
#header.header-prewhite .rb-mega-panel img,
#header.header-prewhite .rb-mega-panel svg,
#header.header-prewhite .rb-mega-panel svg path,
#header.header-prewhite .rb-mega-panel svg circle,
#header.header-prewhite .rb-mega-panel svg rect,
#header.header-prewhite .rb-mega-panel svg line,
#header.header-prewhite .rb-mega-panel svg polyline,
#header.header-prewhite .rb-mega-panel svg polygon {filter: none !important; fill: initial !important; stroke: initial !important;}

#header.header-prewhite:not(.scrolled):not(.rb-mega-open) .search_top_wrap_inner {border: 1px solid #fff !important; border-radius: 999px !important;}
#header.header-prewhite:not(.scrolled):not(.rb-mega-open) .search_top_wrap_inner input {color: #fff !important; background: transparent !important; border: 1px solid transparent !important;}
#header.header-prewhite:not(.scrolled):not(.rb-mega-open) .search_top_wrap_inner input::placeholder {color: #fff !important; opacity: 0.7 !important;}
#header.header-prewhite:not(.scrolled):not(.rb-mega-open) .search_top_wrap_inner button,
#header.header-prewhite:not(.scrolled):not(.rb-mega-open) .search_top_wrap_inner button img {background: transparent !important; filter: brightness(0) invert(1) !important;}

.header-auth {display: flex; flex: 1;}
.auth-menu {display: flex; align-items: center; justify-content: flex-end; gap: 0; padding-top: 15px; white-space: nowrap; width: 100%;}
.auth-menu .auth-link {font-weight: var(--fw-sb); font-size: var(--sb-13); line-height: 1; letter-spacing: 0; vertical-align: middle;}
.auth-menu .auth-link,
.auth-menu .auth-dropdown {display: inline-flex; align-items: center;}
.auth-menu .auth-link:not(:first-child)::before,
.auth-menu .auth-dropdown:not(:first-child)::before {content: "•"; margin: 0 14px; font-size: inherit; font-weight: inherit; color: inherit;}

.header-logo {display: flex; align-items: center; width: 100%;}
.main_menu {display: flex; align-items: flex-start; flex: 1; gap: 0;}
.main_menu a {color: #000; font-size: var(--fs-19); font-weight: var(--fw-bold); text-align: center; padding: 0 20px 15px; border-bottom: 3px solid transparent; transition: color 250ms ease-in-out, border-color 250ms ease-in-out;}
.main_menu a:hover {border-color: currentColor;}
.main_menu a.on {color: #38004A; font-size: var(--fs-19); font-weight: var(--fw-bold); border-bottom: 3px solid var(--rb-main-color); border-color: #38004A;}
.logo_wrap {flex: 1;}

.main_menu button {background: none; border: none; cursor: pointer; line-height: 0; padding: 0;}

.rb-mega-trigger {display: inline-flex; align-items: center;}
.rb-mega-btn {position: relative; top: -4px;}
.rb-mega-panel {position: absolute; top: 100%; left: 50%; width: 100vw; padding: 0; background: #fff; border-bottom: 1px solid rgba(0, 0, 0, 0.05); box-shadow: 0 25px 45px rgba(9, 36, 75, 0.12); opacity: 0; visibility: hidden; transform: translate(-50%, 0); transition: all 250ms ease-in-out; pointer-events: none; z-index: 2500;}
.rb-mega-trigger:hover .rb-mega-panel,
.rb-mega-trigger:focus-within .rb-mega-panel,
.rb-mega-trigger.is-open .rb-mega-panel {opacity: 1; visibility: visible; pointer-events: auto;}
.rb-mega-panel * {box-sizing: border-box; font-family: inherit;}
.rb-mega-inner {width: 100%; max-width: 1320px; margin: 0 auto; padding: 28px 0px 34px;}
.main_menu .rb-mega-panel a {display: inline-flex; align-items: center; padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; color: inherit; text-decoration: none; line-height: 1.35;}
.main_menu .rb-mega-panel .rb-mega-list a {display: block;}
.rb-mega-grid {display: grid; grid-template-columns: 130px 130px 220px 220px; column-gap: 48px; row-gap: 12px; align-items: flex-start; justify-content: flex-start; text-align: left;}
.rb-mega-col {display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; text-align: left;}
.main_menu .rb-mega-title,
.rb-mega-title {display: inline-flex; color: #111; font-size: 17px; font-weight: var(--fw-bold); letter-spacing: -0.01em; text-decoration: none;}
.rb-mega-desc {margin-top: 0; color: #646464; font-size: var(--fs-14); line-height: 1.35;}
.rb-mega-list {margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px;}
.main_menu .rb-mega-panel .rb-mega-list a,
.rb-mega-list a {color: #646464; font-size: 15px; font-weight: var(--fw-medium); text-decoration: none; transition: color 0.2s ease; white-space: nowrap;}
.rb-mega-list a:hover {color: var(--rb-main-color);}
.rb-mega-empty {margin-top: 18px; color: #9da0a8; font-size: var(--fs-14);}

.icon_menu_wrap {display: flex; align-items: center; list-style: none; padding: 0; margin: 0;}
.icon_menu_wrap button {position: relative;}
.icon_menu_wrap button:not(:last-child) {margin-right: 30px;}
.icon_menu_wrap .count {position: absolute; top: 0; right: 0; display: inline-flex; justify-content: center; align-items: center; width: 14px; height: 14px; border-radius: 50%; font-size: var(--fs-12); font-weight: var(--fw-bold); color: #fff; background-color: var(--rb-main-color); z-index: 10;}
.icon_menu_wrap .join_button {position: absolute; left: 50%;}
.icon_menu_wrap .speech_bubble {position: absolute; top: 0; left: 50%; transform: translate(-50%, -100%); z-index: 10; animation: speechBubbleBounce 1.8s ease-in-out infinite;}

@keyframes speechBubbleBounce {
    0% {transform: translate(-50%, -110%);}
    50% {transform: translate(-50%, -90%);}
    100% {transform: translate(-50%, -110%);}
}

.header-right {flex: 1;}
.menu_wrap {display: flex; justify-content: space-between; margin-top: 30px;}

/* 레이아웃 CSS */
.rows_gnb_wrap {border-top: 1px solid rgba(255, 255, 255, 0.2); padding-top: 10px; margin-top: 20px;}
.row_gnbs {position: relative;}
.row_gnbs .cbp-hrmenu > ul,
.cbp-hrmenu .cbp-hrsub-inner {padding-left: 0; padding-right: 0;}
.row_gnbs .cbp-hrmenu > ul > li {padding-left: 0; padding-right: 30px;}
.row_gnbs .cbp-hrmenu > ul {float: none !important; line-height: 100%;}
.gnb_wrap .row_gnbs nav {float: none;}
.row_gnbs .cbp-hrmenu .cbp-hrsub {top: 40px;}

.search_top_wrap {position: relative; flex-shrink: 0; width: 450px;}
.search_top_wrap_inner {position: relative; border: 1px solid #000; border-radius: 200px;}
.search_top_wrap input {background-color: rgba(0, 0, 0, 0) !important; border: 1px solid transparent; border-radius: 200px; height: 46px; width: 100%; color: #000;}
.search_top_wrap button {position: absolute; top: 6px; right: 19px;}
.search_top_wrap_inner {position: relative;}

/* 게시판 fixed 버튼 위치조정 */
.rb_bbs_wrap .btns_gr_wrap {top: 185px !important;}

.co_header0 .rows_gnb_wrap {border-top: 1px solid rgba(0, 0, 0, 0.05);}
.co_header0 .search_top_wrap input {background-color: rgba(0, 0, 0, 0);}
.ser_display_none .search_top_wrap_inner {display: none;}

.top-menu {display: none;}

/* 모바일 전용 */
@media screen and (max-width:1024px) {
    .top-menu {display: flex; justify-content: space-between; padding: 0 8px; gap: 0; overflow: hidden; color: #fff; font-size: 18px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);} /* 상하 여백은 내부 a에서 처리 */
    .top-menu a {flex: 1 1 0; text-align: center; line-height: 60px; color: #fff; text-decoration: none; border-radius: 6px; transition: background 0.2s, color 0.2s;} /* 5개 메뉴 균등 분할 */
}

@media all and (max-width:1024px) {
    .rb-mega-panel {display: none;}
    .rows_gnb_wrap {display: none;}
    .gnb_wrap .snb_wrap .qm_wrap a {width: auto; padding-left: 0; margin-left: 20px;}
    .gnb_wrap .tog_wrap {margin-right: 0 !important;}
    .icon_menu_wrap button:not(:last-child) {margin-right: 20px;}
    .mobile_cb {clear: both;}
    .search_top_wrap {display: none; float: none !important; width: 100%; margin-top: 10px;}
    .gnb_wrap .snb_wrap .my_btn_wrap {display: block; margin-left: 20px;}
    .gnb_wrap .snb_wrap .my_btn_wrap .btn_round.arr_bg {display: none;}
    .gnb_wrap .snb_wrap .my_btn_wrap .btn_round {padding-left: 15px; padding-right: 15px; height: 35px;}
    .gnb_wrap .snb_wrap .qm_wrap a span {left: 10px;}
    .header-auth {display: none;}
    .menu_wrap {display: none;}
    .gnb_wrap .logo_wrap {margin-right: 0;}
    .gnb_wrap .inner {display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 35px 12px 26px !important;}
    .rows_gnb_wrap2 {display: none;}
    #header {padding-top: 0; padding-bottom: 0; background-color: transparent !important; box-shadow: none;}
    .header-logo {display: block; width: auto;}
    .gnb_wrap #logo_img .responsive-image {height: 20px;}
    .co_header_ffffff #header {border-bottom: 0 !important;}
    .icon_menu_wrap {display: block;}
    .tog_wrap2 {display: flex; justify-content: flex-end; justify-self: end; gap: 8px;}
    #header.scrolled,
    #header.rb-mega-open {background-color: #fff !important; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);}
}

