@charset "utf-8";

#sub_visual, #sub_visual *, .sub_content_heading, .sub_content_heading * { box-sizing:border-box; }

#sub_visual { position:relative; width:100%; height:600px; overflow:visible; background:#17344e center center / cover no-repeat; color:#fff; }
.sub_visual_inner { position:relative; width:1300px; height:600px; margin:0 auto; z-index:2; }
.sub_visual_copy { position:absolute; top:248px; left:0; }
.sub_visual_title { display:flex; margin-left:-1px; align-items:flex-end; gap:27px; }
.sub_visual_title h2 { margin:0; line-height:1; font-size:55px; font-weight:800; color:#fff; word-break:keep-all; text-shadow:4px 4px 7px rgba(0,0,0,.2); }
.sub_visual_title span { display:block; padding-bottom:8px; line-height:1; font-family:'Gmarket Sans', sans-serif; font-size:21px; font-weight:400; color:rgba(255,255,255,.65); letter-spacing:.025em; text-shadow:4px 4px 7px rgba(0,0,0,.2); }
.sub_visual_copy > p { margin:36px 0 0 2px; line-height:1.7; font-size:16px; font-weight:500; color:rgba(255,255,255,.85); word-break:keep-all; }

.sub_menu_selects { position:absolute; left:0; bottom:100px; display:flex; gap:15px; z-index:12; }
.sub_menu_select { position:relative; min-width:220px; width:max-content; }
.sub_menu_toggle { display:flex; min-width:220px; width:max-content; height:60px; padding:0 28px 0 38px; border:0; border-radius:30px; background:transparent; align-items:center; justify-content:space-between; cursor:pointer; appearance:none; -webkit-appearance:none; outline:0; box-shadow:none; }
.sub_menu_toggle:focus, .sub_menu_toggle:active { outline:0; box-shadow:none; }
.sub_menu_toggle span { overflow:visible; margin-top:-1px; font-size:18px; font-weight:600; color:#fff; text-align:left; text-overflow:clip; white-space:nowrap; }
.sub_menu_toggle img { display:block; width:12px; height:8px; margin:-1px 0 0 21px; transition:transform .2s ease; }
.sub_menu_select.open .sub_menu_toggle img { transform:rotate(180deg); }
.sub_menu_select_top .sub_menu_toggle { border:2px solid rgba(255,255,255,.92); background:rgba(0,0,0,.08); }
.sub_menu_select_sub .sub_menu_toggle { border:0; background:#0037b8; }

.sub_menu_dropdown { position:absolute; top:70px; left:0; display:block; min-width:100%; width:max-content; margin:0; padding:14px 0; overflow:visible; border:0; border-radius:20px; background:#fff; box-shadow:0 15px 32px rgba(0,0,0,.16); opacity:0; visibility:hidden; transform:translateY(-12px); pointer-events:none; transition:opacity .22s ease, transform .28s cubic-bezier(.22,.61,.36,1), visibility 0s linear .28s; }
.sub_menu_select.open .sub_menu_dropdown { opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; transition:opacity .22s ease, transform .28s cubic-bezier(.22,.61,.36,1), visibility 0s; }
.sub_menu_dropdown li { margin:0; padding:0; border:0; background:none; }
.sub_menu_dropdown li a { display:block; padding:12px 28px; line-height:1.45; font-size:16px; font-weight:500; color:#292929; white-space:nowrap; word-break:keep-all; overflow:visible; text-overflow:clip; transition:background .18s ease; }
.sub_menu_dropdown li a:hover { background:#f2f7ff; }
.sub_menu_dropdown li a.depth2 { padding-left:42px; font-size:14px; color:#555; }
.sub_menu_dropdown li a.depth3 { padding-left:54px; font-size:13px; color:#777; }

/* 2차 메뉴에 3차 메뉴가 있으면 우측 flyout 표시 */
.sub_menu_dropdown_depth2 > li { position:relative; }
.sub_menu_dropdown_depth2 > li.has_depth3:after { position:absolute; top:0; right:-16px; width:16px; height:100%; content:''; }
.sub_menu_dropdown li a.has_depth3_link { display:flex; min-width:100%; align-items:center; justify-content:space-between; gap:28px; }
.sub_menu_dropdown li a.has_depth3_link > span { white-space:nowrap; }
.sub_menu_dropdown li a.has_depth3_link .depth3_arrow { display:block; width:8px; height:8px; margin:0 2px 0 10px; border-top:2px solid #7f8792; border-right:2px solid #7f8792; transform:rotate(45deg); transform-origin:center; transition:border-color .18s ease, transform .18s ease; }
.sub_menu_dropdown_depth2 > li.has_depth3:hover > a .depth3_arrow { border-color:#0037b8; transform:translateX(2px) rotate(45deg); }

.sub_menu_depth3 { position:absolute; top:-14px; left:calc(100% + 16px); display:block; min-width:220px; width:max-content; margin:0; padding:14px 0; overflow:visible; border:0; border-radius:20px; background:#fff; box-shadow:0 15px 32px rgba(0,0,0,.16); opacity:0; visibility:hidden; transform:translateX(-10px); pointer-events:none; transition:opacity .18s ease, transform .24s cubic-bezier(.22,.61,.36,1), visibility 0s linear .24s; z-index:3; }
.sub_menu_dropdown_depth2 > li.has_depth3:hover > .sub_menu_depth3 { opacity:1; visibility:visible; transform:translateX(0); pointer-events:auto; transition:opacity .18s ease, transform .24s cubic-bezier(.22,.61,.36,1), visibility 0s; }
.sub_menu_depth3 li { position:relative; }
.sub_menu_depth3 li a { min-width:220px; padding:12px 28px; font-size:15px; font-weight:500; color:#292929; white-space:nowrap; }
.sub_menu_depth3 li a:hover { background:#f2f7ff; }

/* 캡처 예시처럼 열린 메뉴 최상단에 별도의 border가 생기지 않도록 모든 outline/border 제거 */
.sub_menu_dropdown, .sub_menu_dropdown li:first-child, .sub_menu_dropdown li:first-child a { border:0 !important; outline:0 !important; }

.sub_breadcrumb { position:absolute; right:0; bottom:118px; display:flex; height:24px; align-items:center; color:#fff; }
.sub_breadcrumb span { display:block; font-size:14px; font-weight:500; color:rgba(255,255,255,.78); white-space:nowrap; }
.sub_breadcrumb span.current { font-weight:700; color:#fff; }
.sub_breadcrumb .home { width:14px; height:14px; }
.sub_breadcrumb .home img { display:block; width:14px; height:14px; }
.sub_breadcrumb .arr { display:block; width:10px; height:11px; margin:-1px 14px 0 15px; object-fit:contain; }

.sub_content_heading { width:1300px; margin:110px auto 72px; text-align:center; }
.sub_content_en { display:block; margin-bottom:22px; line-height:1; font-family:'Gmarket Sans', sans-serif; font-size:15px; font-weight:700; color:#0037b8; }
.sub_content_heading h2 { position:relative; display:inline-block; margin:0; line-height:1.15; font-size:42px; font-weight:800; color:#222; word-break:keep-all; }
.sub_content_heading h2 i { position:absolute; top:-5px; right:-15px; display:block; width:10px; height:10px; border-radius:50%; background:#99b8ff; }

/* 콘텐츠 타이틀 하단 3차 메뉴 탭 */
.sub_depth3_tabs { display:flex; width:100%; max-width:960px; margin:70px auto 0; overflow:hidden; border:1px solid #d9e0ea; border-radius:31px; background:#fff; }
.sub_depth3_tabs a { position:relative; display:flex; flex:1 1 0; min-width:0; height:60px; padding:0 24px; align-items:center; justify-content:center; font-size:17px; font-weight:600; color:#3a3a3a; white-space:nowrap; transition:background .2s ease; }
.sub_depth3_tabs a + a:before { position:absolute; top:17px; left:0; width:1px; height:26px; content:''; background:#e6eaf0; }
.sub_depth3_tabs a:hover { background:#f2f7ff; }
.sub_depth3_tabs a.active { background:#0a49c9; color:#fff; }
.sub_depth3_tabs a.active:before, .sub_depth3_tabs a.active + a:before { opacity:0; }

/* 메뉴가 많은 경우(예: 갤러리)는 자동 compact */
.sub_depth3_tabs.compact { max-width:1180px; border-radius:25px; }
.sub_depth3_tabs.compact a { height:50px; padding:0 15px; font-size:14px; font-weight:600; }
.sub_depth3_tabs.compact a + a:before { top:13px; height:24px; }

/* 그누보드 기본 페이지 타이틀이 별도로 출력되는 경우 중복 방지 */
#container_title { display:none; }

@media (max-width:1400px) {
    .sub_visual_inner, .sub_content_heading { width:calc(100% - 80px); }
}

@media (max-width:900px) {
    #sub_visual, .sub_visual_inner { height:560px; }
    .sub_visual_copy { top:200px; }
    .sub_visual_title { display:block; }
    .sub_visual_title h2 { font-size:38px; }
    .sub_visual_title span { margin-top:12px; font-size:17px; }
    .sub_visual_copy > p { max-width:90%; margin-top:28px; }
    .sub_menu_selects { bottom:70px; width:100%; }
    .sub_menu_select { min-width:220px; width:max-content; }
    .sub_menu_toggle { min-width:220px; width:max-content; padding:0 24px; }
    .sub_breadcrumb { display:none; }
    .sub_content_heading { margin-top:75px; }

    .sub_menu_depth3 { top:0; left:calc(100% + 10px); }
    .sub_depth3_tabs { flex-wrap:wrap; overflow:visible; border:0; border-radius:0; gap:8px; }
    .sub_depth3_tabs a, .sub_depth3_tabs.compact a { flex:1 1 calc(50% - 8px); height:46px; border:1px solid #d9e0ea; border-radius:23px; font-size:14px; }
    .sub_depth3_tabs a + a:before { display:none; }
}

/* 긴 세부 메뉴: 동일 너비 2열, 높이 자동, 원문 전체 표시 */
.sub_depth3_tabs.long_labels { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); max-width:1180px; gap:12px; border:0; border-radius:0; overflow:visible; background:transparent; }
.sub_depth3_tabs.long_labels a { text-decoration:none; flex:none; box-sizing:border-box; width:100%; height:auto; min-height:80px; padding:20px 24px; border:1px solid #d9e0ea; border-radius:16px; white-space:normal; word-break:keep-all; overflow-wrap:anywhere; line-height:1.65; text-align:center; }
.sub_depth3_tabs.long_labels a:before { display:none; }
.sub_depth3_tabs.long_labels a.active { border-color:#0a49c9; }
.sub_depth3_tabs a:focus-visible { outline:3px solid #8fb3ff; outline-offset:3px; }
@media (max-width:900px) {
 .sub_depth3_tabs a, .sub_depth3_tabs.compact a { box-sizing:border-box; height:auto; min-height:54px; padding:12px 16px; white-space:normal; word-break:keep-all; overflow-wrap:anywhere; line-height:1.6; }
 .sub_depth3_tabs.long_labels a { min-height:80px; padding:16px 18px; font-size:15px; }
}
@media (max-width:600px) {
 .sub_depth3_tabs.long_labels { grid-template-columns:1fr; gap:10px; }
 .sub_depth3_tabs.long_labels a { min-height:62px; padding:15px 20px; border-radius:14px; }
}
/* 좁은 화면에서 상단 선택 메뉴와 긴 하위 메뉴도 화면 안에 표시 */
@media (max-width:900px) {
 .sub_menu_selects { gap:10px; }
 .sub_menu_select { min-width:0; width:calc(50% - 5px); }
 .sub_menu_toggle { min-width:0; width:100%; height:auto; min-height:60px; padding:14px 18px; }
 .sub_menu_toggle span { min-width:0; white-space:normal; word-break:keep-all; overflow-wrap:anywhere; line-height:1.5; font-size:15px; }
 .sub_menu_toggle img { flex-shrink:0; margin-left:12px; }
 .sub_menu_dropdown { display:none; width:calc(200% + 10px); min-width:0; list-style:none; }
 .sub_menu_select.open .sub_menu_dropdown { display:block; }
 .sub_menu_select_sub .sub_menu_dropdown { left:auto; right:0; }
 .sub_menu_dropdown li a, .sub_menu_dropdown li a.has_depth3_link > span { white-space:normal; overflow-wrap:anywhere; }
 .sub_menu_depth3, .sub_menu_dropdown_depth2 > li.has_depth3:hover > .sub_menu_depth3 { display:block; position:static; width:100%; min-width:0; margin:0; padding:0 0 10px; border-radius:0; box-shadow:none; opacity:1; visibility:visible; transform:none; pointer-events:auto; list-style:none; }
 .sub_menu_depth3 li a { min-width:0; padding:10px 28px 10px 42px; font-size:14px; white-space:normal; }
 .sub_menu_dropdown_depth2 > li.has_depth3:after, .depth3_arrow { display:none; }
 .sub_content_heading h2 { max-width:100%; overflow-wrap:anywhere; }
}
@media (max-width:600px) {
 .sub_visual_inner, .sub_content_heading { width:calc(100% - 36px); }
 .sub_visual_copy { width:100%; }
 .sub_visual_title h2 { font-size:32px; line-height:1.3; }
 .sub_content_heading h2 { font-size:30px; line-height:1.45; }
 .sub_content_en { font-size:13px; line-height:1.6; }
}