/* picomax_theme5 - old/theme5 (picomax 3D 프레임) 복원 */
body { margin:0; padding:0; background:#FFF; }

#t5_wrap, #t5_wrap table, #t5_wrap td, #t5_wrap input, #t5_wrap div, #t5_wrap form {
	font-size:9pt; font-family:굴림,Gulim,Dotum,AppleGothic,sans-serif; color:#636563;
}
#t5_wrap a:link, #t5_wrap a:visited { color:#636563; text-decoration:none; }
#t5_wrap a:hover, #t5_wrap a:active { color:#636563; text-decoration:underline; }

#t5_wrap { width:952px; margin:0 auto; padding-top:10px; }   /* 프레임 위 10px 여백 (margin 은 부모로 상쇄될 수 있어 padding 으로) - 2026-08-30 */
#t5_frame { position:relative; width:952px; }
#t5_stdtb { margin-top:0; }
#t5_stdtb > tbody > tr > td { padding:0; }   /* 바깥 3D 표 셀만. 안쪽 표들의 cellpadding 은 살린다 */

/* 서브메뉴 레이어 (menu_sub.php) - 원본 <table width=140 cellpadding=5 cellspacing=1>
   원본은 라벨 칸(<td align=center valign=top>)이 140px 안에서 한 글자씩 세로로 접히고(스/터/디)
   남는 폭을 항목 칸이 전부 가져간다. 라벨에 nowrap 을 주면 라벨이 47px 를 먹어 항목 칸이 90px 로 쪼그라든다.
   → 라벨은 원본처럼 최소폭(width:1px = min-content)으로 두고, 항목은 nowrap.
   표는 width:auto + min-width:140px 로 두어, 항목이 남는 폭보다 길면 140 을 넘어 표가 늘어난다
   (옛 브라우저에서 width=140 은 '최소폭' 이었다. 그래야 항목이 줄바뀜/삐져나오지 않는다). */
.t5_sub { display:none; position:absolute; left:231px; z-index:20; opacity:.6; filter:alpha(opacity=60); }
.t5_sub table { width:auto; min-width:140px; }
.t5_sub td { font-size:9pt; }
.t5_sub .t5_sub_label { width:1px; color:#CCCCCC; }
.t5_sub .t5_sub_items { width:auto; line-height:18px; white-space:nowrap; }
.t5_sub .t5_sub_items a { color:#B0B0B0 !important; }
.t5_sub .t5_sub_items img { vertical-align:middle; }

/* 3D 프레임 맨 윗줄(6px) : 인라인 이미지의 line-height 여백으로 줄이 부풀면
   p{n}_3d_top2.gif(1x6) 이 세로로 반복돼 줄무늬가 생기고 오른쪽 모서리(p{n}_3d_right0.gif)가 내려앉는다.
   줄 높이를 이미지 원본(6px)으로 고정하고 배경은 가로로만 반복시킨다. */
#t5_stdtb > tbody > tr:first-child > td { height:6px; font-size:0; line-height:0; vertical-align:bottom; background-repeat:repeat-x; background-position:left bottom; }
#t5_stdtb > tbody > tr:first-child > td img { display:block; }

/* 왼쪽 이미지 메뉴 */
/* 왼쪽 이미지 메뉴 : 원본(_head.php 의 left_menu1~8)처럼 8장을 미리 겹쳐 두고 보이기/숨기기만 한다.
   background-image 를 갈아끼우면 교체 때마다 다시 그려져 흰 화면이 번쩍인다 - 2026-08-30 */
#t5_leftmenu { position:relative; width:230px; height:309px; }
#t5_leftmenu .t5_menuimg { position:absolute; left:0; top:0; width:230px; height:309px; background-repeat:no-repeat; visibility:hidden; }
#t5_leftmenu .t5_menuimg.on { visibility:visible; }
#t5_leftmenu img { position:relative; z-index:2; display:block; cursor:pointer; }

/* 헤더 720x309 */
#t5_head { position:relative; width:720px; height:309px; background-repeat:no-repeat; }
#t5_head .t5_toplinks { position:absolute; left:8px; top:8px; font-size:9pt; }
#t5_head .t5_toplinks b { font-family:Tahoma,돋움,굴림,sans-serif; }
#t5_head #t5_thedog { position:absolute; left:40px; top:132px; width:230px; text-align:center; z-index:1; }
#t5_head #t5_thedog .t5_balloon { height:30px; line-height:30px; }
/* 검은 팝업 : old/theme5 _head.php 는 세로 105px 칸 안에서 열고 닫혀서 아래쪽(y=239)이 항상 고정이다.
   상단링크 130 + 팝업 105 + 현재위치 70 = 305 를 309px 헤더에 valign=bottom 으로 붙이므로 팝업칸은 top 134 ~ 239 */
/* 검은 팝업 - 닫힘 바(28px)와 열림 패널(105px)을 한 상자에 겹쳐 두고 아래끝을 맞춘다.
   상자는 아래 캐릭터(#t5_thedog)와 화면에서 겹치므로 pointer-events:none 이어야
   캐릭터의 링크와 말풍선 롤오버가 살아난다 (투명해도 블록 박스는 마우스를 가로챈다) - 2026 */
#t5_head .t5_popup_box { position:absolute; left:40px; top:134px; width:230px; height:105px; z-index:8; pointer-events:none; }
#t5_head #t5_popup_off { position:absolute; left:0; bottom:0; width:230px; height:28px; background-repeat:no-repeat; opacity:1; pointer-events:auto; }
#t5_head #t5_popup_on_wrap { position:absolute; left:0; bottom:0; width:230px; height:28px; overflow:hidden; opacity:0; pointer-events:none; }
/* 패널은 wrap 의 *위쪽* 에 붙인다 - wrap 이 자라면 패널이 통째로 따라 올라온다 */
#t5_head #t5_popup_on { display:block; position:absolute; left:0; top:0; width:230px; height:105px; background-repeat:no-repeat; }
#t5_head #t5_popup_on img { display:block; }
#t5_head .t5_popup_body { height:77px; padding:8px 8px 0; overflow:hidden; opacity:0; }

#t5_head .t5_popup_box.t5_pop_open #t5_popup_off { opacity:0; pointer-events:none; }
#t5_head .t5_popup_box.t5_pop_open #t5_popup_on_wrap { height:105px; opacity:1; pointer-events:auto; }
#t5_head .t5_popup_box.t5_pop_open .t5_popup_body { opacity:1; }

/* 움직임은 **상자째로** 준다 - 높이만 줄이면 정작 보이는 닫힘 바가 제자리라 아무 움직임도 안 보인다.
   .t5_pop_anim 은 **첫 클릭 때** 붙인다 - CSS animation 은 요소가 처음 렌더될 때 재생되므로
   미리 붙여 두면 화면이 뜨는 순간 저절로 한 번 돈다 - 2026 */
/* 닫힐 때: 0.1s 만에 기준보다 2px 아래까지 내려갔다가 곧바로 제자리로 */
#t5_head .t5_popup_box.t5_pop_anim #t5_popup_off { transition:opacity .08s ease; }
#t5_head .t5_popup_box.t5_pop_anim #t5_popup_on_wrap { transition:opacity .06s ease .10s; }
#t5_head .t5_popup_box.t5_pop_anim .t5_popup_body { transition:opacity .10s ease; }
#t5_head .t5_popup_box.t5_pop_anim.t5_pop_closing { animation:t5_box_drop .16s both; }
#t5_head .t5_popup_box.t5_pop_anim.t5_pop_closing #t5_popup_on_wrap { animation:t5_pop_drop .16s both; }

/* 열릴 때: 누른 순간 2px 내려앉았다가 0.1s 만에 위로, 오버슈트 없이 멈춘다 */
#t5_head .t5_popup_box.t5_pop_anim.t5_pop_open #t5_popup_off { transition:opacity .10s ease .05s; }
#t5_head .t5_popup_box.t5_pop_anim.t5_pop_open { animation:t5_box_rise .18s both; }
#t5_head .t5_popup_box.t5_pop_anim.t5_pop_open #t5_popup_on_wrap { animation:t5_pop_rise .18s both; transition:opacity .12s ease .05s; }
#t5_head .t5_popup_box.t5_pop_anim.t5_pop_open .t5_popup_body { transition:opacity .20s ease .10s; }

/* 최저점 keyframe 을 두 번 찍어 한 프레임(약 16ms)은 반드시 아래로 찍히게 한다.
   내려가는 구간은 끝에서 감속시키지 않는다(감속하면 바닥을 스치기만 한다) - 2026 */
@keyframes t5_box_drop {
	0%   { transform:translateY(0);   animation-timing-function:cubic-bezier(.5,0,.95,.55); }
	62%  { transform:translateY(2px); }
	72%  { transform:translateY(2px); animation-timing-function:cubic-bezier(.15,.9,.3,1); }
	100% { transform:translateY(0); }
}
@keyframes t5_pop_drop {
	0%   { height:105px; animation-timing-function:cubic-bezier(.5,0,.95,.55); }
	62%  { height:26px; }
	72%  { height:26px;  animation-timing-function:cubic-bezier(.15,.9,.3,1); }
	100% { height:28px; }
}
@keyframes t5_box_rise {
	0%   { transform:translateY(0);   animation-timing-function:cubic-bezier(.4,0,.85,.7); }
	28%  { transform:translateY(2px); }
	36%  { transform:translateY(2px); animation-timing-function:cubic-bezier(.06,.9,.2,1); }
	100% { transform:translateY(0); }
}
@keyframes t5_pop_rise {
	0%   { height:28px; animation-timing-function:cubic-bezier(.4,0,.85,.7); }
	28%  { height:26px; }
	36%  { height:26px; animation-timing-function:cubic-bezier(.06,.9,.2,1); }
	100% { height:105px; }
}
#t5_head .new_article, #t5_head .new_article a { font-size:8pt; color:#C0C0C0; line-height:10pt; }
#t5_head .new_article2, #t5_head .new_article2 a { font-size:8pt; color:#636563; line-height:10pt; }
#t5_head .t5_popup_body .new_article a { color:#C0C0C0 !important; }
/* 열린 팝업 안의 제목·내용·더보기는 모두 밝은 회색 (.new_article2 가 #636563 이라 검은 배경에 묻혔다) - 2026 */
#t5_head #t5_popup_on,
#t5_head #t5_popup_on a,
#t5_head #t5_popup_on font,
#t5_head #t5_popup_on .new_article,
#t5_head #t5_popup_on .new_article2,
#t5_head #t5_popup_on .new_article2 a { color:#C0C0C0; }
/* 탑 메뉴 이미지맵도 링크 커서로 */
#t5_head #t5_menumap area, #t5_leftmenu img { cursor:pointer; }
/* 현재 위치 : 헤더(309px)의 맨 아래 70px 칸에 valign=bottom 으로 붙는다 */
#t5_head .t5_now { position:absolute; left:20px; bottom:0; width:610px; }
#t5_head .t5_now_text { font-size:8pt; height:16px; line-height:16px; }
#t5_head .t5_now_line { height:1px; margin:3px 0 4px; background-repeat:repeat-x; }
#t5_head .t5_banner { position:absolute; right:10px; top:30px; text-align:right; }
#t5_head .t5_banner img { margin:5px 0; }

/* 본문 2단 */
#t5_body { width:950px; table-layout:auto; }   /* 원본처럼 자동 배치 : 720 칸 안에서 메인 표(375/360)가 줄어들어 맞춰진다 (fixed 로 두면 줄지 않고 넘친다) */
#t5_body > tbody > tr > td { padding:0; }
#t5_left { width:230px; background:#F5F3EE; }
#t5_left .t5_left_top { width:230px; height:9px; background-repeat:no-repeat; }
#t5_left .t5_leftlist td { padding:0; }
#t5_left .t5_leftlist .t5_item { cursor:pointer; white-space:nowrap; }
#t5_left .t5_leftlist .t5_item img { vertical-align:middle; border:0; }
#t5_left .t5_dot { height:1px; line-height:1px; font-size:0; background-repeat:repeat-x; overflow:hidden; }
#t5_left .t5_find { margin:12px 0 0; padding:3px; font-size:8pt; color:#666666; white-space:nowrap; }
#t5_left .t5_find input.find_submit { border:1px solid #CCCCCC; font-size:8pt; color:black; background:#FFFFFF; height:19px; }
#t5_left .t5_find input[type="text"] { width:120px; }
#t5_left .t5_quick td { font-family:Tahoma,돋움,sans-serif; font-size:8pt; padding:4px 0; }
#t5_left .t5_quick img { display:block; margin:3px auto 0; }
#t5_content { width:720px; overflow:hidden; word-wrap:break-word; }
#t5_content .t5_toptitle { display:block; margin:10px auto 5px; }
#t5_content .t5_content_in { padding:0 0 12px 0; }

/* 푸터 */
#t5_foot > tbody > tr > td { padding:0; }
#t5_foot .t5_copy { padding:10px; }
#t5_foot font { color:#FFFFFF; }

/* ---- 메인 페이지 (main/main.php) ---- */
.t5_main td { font-size:9pt; }
.t5_main a { color:#636563; }
/* 메인 왼쪽 열(공지사항/게시판/앨범) : 원본 cellpadding 5 + 왼쪽 10px 추가 - 2026-08-30 */
.t5_main td.t5_col_l { padding-left:15px; }
.t5_bio td { font-size:8pt; color:#666666; }
.t5_bio td.t5_bar { font-size:0; line-height:0; }
.t5_bio td.t5_bar img { display:block; margin:0 auto; }
.t5_bio input.ipt2 { border:1px solid #CCCCCC; font-size:8pt; color:#666666; height:18px; padding:0 2px; }
.t5_pizza td { font-size:8pt; color:#666666; }
.t5_pizza a { color:#666666; }
.t5_pie { width:74px; height:74px; display:block; margin:0 auto; }
div.t5_pie_empty { border-radius:50%; background:#E7E7E7; box-shadow:0 1px 2px rgba(0,0,0,.25); }
/* SVG 부채꼴이라 사각형 그림자가 지지 않게 box-shadow 대신 drop-shadow */
svg.t5_pie { filter:drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
svg.t5_pie path, svg.t5_pie circle { transition:opacity .1s linear; }
svg.t5_pie path:hover, svg.t5_pie circle:hover { opacity:.7; }
.t5_pie_dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:3px; vertical-align:middle; }
.t5_nothumb { display:inline-block; width:100px; height:75px; line-height:75px; overflow:hidden; background:#F7F7F7; font-size:8pt; color:#999; text-align:center; }
.t5_dot { height:1px; line-height:1px; font-size:0; background:url(../img/dot.gif) repeat-x left top; overflow:hidden; }

/* data-tip 툴팁 (원그래프 조각 등) : body 바로 밑에 붙으므로 #t5_wrap 글꼴을 못 물려받는다 */
#t5_tip {
	position:absolute; z-index:1000; display:none; padding:2px 6px;
	border:1px solid #767676; background:#FFFFE1; color:#000000;
	font-family:굴림,Gulim,Dotum,AppleGothic,sans-serif; font-size:8pt; line-height:15px;
	white-space:nowrap; box-shadow:1px 1px 2px rgba(0,0,0,.2); pointer-events:none;
}

/* ---- 사이트맵 (old/theme5 html/contents/sitemap.php) ----
   블록 4개 x 170px = 680px 로 본문 720px 안에 가운데 놓인다.
   머리띠 색/2px 줄/영문 표기는 각 메뉴의 테마 색(theme5_colors())을 인라인으로 받는다. */
#t5_content .t5_map { width:680px; margin:0 auto; padding:10px 0 20px; }
#t5_content .t5_map_desc { margin:0 0 20px; text-align:center; font-size:8pt; }
#t5_content .t5_map_grid { display:flex; flex-wrap:wrap; align-items:flex-start; }
#t5_content .t5_map_block { width:160px; margin:0 5px 20px; }
#t5_content .t5_map_head { height:30px; line-height:30px; text-align:center; }
#t5_content .t5_map_head a, #t5_content .t5_map_head a:link, #t5_content .t5_map_head a:visited {
	display:block; color:#FFFFFF; text-decoration:none;
}
#t5_content .t5_map_head a:hover { color:#FFFFFF; text-decoration:underline; }
#t5_content .t5_map_line { height:2px; font-size:0; line-height:0; }
#t5_content .t5_map_eng { height:18px; line-height:18px; text-align:center; font-family:Tahoma,sans-serif; font-size:7pt; letter-spacing:1px; }
#t5_content .t5_map_list { margin:0; padding:0; list-style:none; background-repeat:repeat-x; background-position:left bottom; }
#t5_content .t5_map_list li { height:24px; line-height:24px; padding:0 0 0 6px; background-repeat:repeat-x; background-position:left top; }
#t5_content .t5_map_list a { display:block; text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#t5_content .t5_map_list img { vertical-align:middle; border:0; }