@charset "utf-8";
/* CSS Document */
.header													{ border-bottom-color:rgba(0,0,0,.1); }
.header .h_logo a										{ background-image:url(/resource/shilhouse/images/common/img_logo_b.png); }
.gnb>li>a												{ color:var(--color-base); }
.header.menu_open .gnb>li>a								{ color:var(--color-white); }
.header .top_util>li[data-util]>a::before,
.header .top_util .sitemap_open::before					{ filter:inherit; }
.header.active .h_logo a								{ background-image:url(/resource/shilhouse/images/common/img_logo.png); }
.header.active .gnb>li>a								{ color:var(--color-white); }
.header.active .top_util>li[data-util]>a::before,
.header.menu_open .top_util>li[data-util]>a::before,
.header.active .top_util .sitemap_open::before,
.header.menu_open .top_util .sitemap_open::before		{ filter:invert(1); }
#container												{ padding-top:150px; }
.footer													{ margin-top:70px; }
[data-subarea]											{ padding-bottom:50px; }
.mt0													{ margin-top:0 !important;} 
#boardWrap												{ max-width:1700px; }
@media all and (max-width:1668px) {
	#container											{ padding-top:140px; }
}
@media all and (max-width:1568px) {
	#container											{ padding-top:130px; }
}
@media all and (max-width:1468px) {
	#container											{ padding-top:120px; }
}
@media all and (max-width:1368px) {
	#container											{ padding-top:110px; }
	.footer												{ margin-top:90px; }
}
@media all and (max-width:1168px) {
	.footer												{ margin-top:30px; }
	[data-subarea]										{ padding-bottom:0; }
}
@media all and (max-width:1024px) {
	 .list_group .bbs_table td.facility,
	 .list_group .bbs_table td.phone,
	 .list_group .bbs_table td.time 				{ display:block; text-align:left; }
}
@media all and (max-width:468px) {
	#container											{ padding-top:90px; }
}
/**********************************************************************

 								서브 레이아웃 

**********************************************************************/
/* 타이틀+위치 */
#container h3.title											{ font-size:2.81em; font-weight:700; display:flex; align-items:center; justify-content:center; }
.sub_title													{ font-size:1.38em; font-weight:800; color:var(--color-point); margin-top:2.73em; margin-bottom:.5em}
.location_wrap												{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; --sizeHig:30px; margin-top:20px; gap:0 20px}
.location_wrap>li											{ display:flex; align-items:center; position:relative; }
.location_wrap [data-location="home"] a						{ display:flex; font-size:0px; width:var(--sizeHig); height:var(--sizeHig); }
.location_wrap [data-location="home"] a::before				{ content:''; display:block; width:100%; height:100%; background:url(/resource/shilhouse/images/sub/icon_home.svg) no-repeat 50% 50%; background-size:auto 16px; opacity:1; }
.location_wrap [data-location="home"]::after				{ display:inline-block; width:10px; height:1px; background:var(--color-base); margin:0 -5px 0 7px;  content:''; }
.location_wrap>li>button									{ display:flex; height:var(--sizeHig); align-items:center; padding-right:20px; }
.location_wrap>li>button::before							{ position:absolute; right:0; top:50%; width:7px; height:7px; border-style:solid; border-width:0 1px 1px 0; border-color:#575757; transform:translateY(-80%) rotate(45deg); 
																	transition:var(--trans-ani); content:''; top:50%; }
.location_wrap>li.active>button::before						{ transform:translateY(-20%) rotate(225deg); }
.location_wrap>li:not(:has(button))							{ padding:0; }
.location_wrap>li .loc_wrap									{ position:absolute; display:none; left:50%; z-index:112; width:150px; padding:1em; background:rgba(51,134,113,.85); backdrop-filter:blur(14px); border-radius:10px; top:30px;  
																transform:translateX(-50%); text-align: center; }
.location_wrap>li .loc_wrap li > a							{ display:flex; justify-content:center; align-items:center; padding:5px 0px; color:var(--color-white); transition:color var(--trans-ani); opacity:.84; line-height:1.2; 
																	word-break:break-all; font-size:.9rem; }
.location_wrap>li .loc_wrap li > a:hover,
.location_wrap>li .loc_wrap li > a:focus					{ opacity:1;}

.title_h4													{ font-family:var(--font-paper);}


@media all and (max-width:1468px) {
	#container h3.title										{ font-size:2.61em; }
	.location_wrap											{ margin-top:10px; }
	.sub_title												{ font-size:1.35em; margin-top:2.5em;}
}
@media all and (max-width:1268px) {
	#container h3.title										{ font-size:2.41em; }
	.sub_title												{ font-size:1.32em; margin-top:2.25em;}
}
@media all and (max-width:1024px) {
	#container h3.title										{ font-size:2rem; }
	.sub_title												{ font-size:1.29rem; margin-top:2em;}
	.location_wrap											{ margin-top:0; }
	.location_wrap											{ --sizeHig:26px; gap:0 15px; }
	.location_wrap [data-location="home"]::after			{ margin:0 -4px 0 4px; }
	.location_wrap>li>button,
	.location_wrap>li .loc_wrap li > a						{ font-size:.85rem; }
	.location_wrap>li .loc_wrap								{ width:100%; min-width:100px; padding:.75em; }
}
@media all and (max-width:668px) {
	#container h3.title										{ font-size:1.8rem; }
	.sub_title												{ font-size:1.26rem; margin-top:1.8em;}
}
@media all and (max-width:468px) {
	#container h3.title										{ font-size:1.65rem; }
	.sub_title												{ font-size:1.23rem; margin-top:1em;}
}
.visual													{ position:relative; width:100%; height:300px; background-position:50% 50%; background-repeat:no-repeat; background-size:cover; margin-top:40px; margin-bottom:80px; }
.visual::before											{ position:absolute; width:100%; height:100%; left:0; top:0; background:rgba(0,0,0,.6); content:''; z-index:1; }
.visual.bg1												{ background-image:url(/resource/shilhouse/images/sub/bg_sub1.jpg); }
.visual.bg2												{ background-image:url(/resource/shilhouse/images/sub/bg_sub2.jpg); }
.visual.bg3												{ background-image:url(/resource/shilhouse/images/sub/bg_sub3.jpg); }
.visual.bg4												{ background-image:url(/resource/shilhouse/images/sub/bg_sub4.jpg); }
.visual.bg5												{ background-image:url(/resource/shilhouse/images/sub/bg_sub5.jpg); }
.visual.bg6												{ background-image:url(/resource/shilhouse/images/sub/bg_sub1.jpg); }
.visual.bg7												{ background-image:url(/resource/shilhouse/images/sub/bg_sub2.jpg); }
.visual.bg8												{ background-image:url(/resource/shilhouse/images/sub/bg_sub3.jpg); }
.visual.bg9												{ background-image:url(/resource/shilhouse/images/sub/bg_sub4.jpg); }
.visual.bg10											{ background-image:url(/resource/shilhouse/images/sub/bg_sub5.jpg); }
.visual.bg11											{ background-image:url(/resource/shilhouse/images/sub/bg_sub1.jpg); }
.visual.bg12											{ background-image:url(/resource/shilhouse/images/sub/bg_sub2.jpg); }

@media all and (max-width:1668px) {
	.visual												{ height:290px;  }
}
@media all and (max-width:1368px) {
	.visual												{ height:280px; margin-bottom:70px; }
}
@media all and (max-width:1168px) {
	.visual												{ height:200px; margin-top:30px; margin-bottom:60px; }
	#container:not(:has(.left_menu)) .visual			{ margin-bottom:40px; }
}
@media all and (max-width:1024px) {
	.visual												{ height:180px; margin-top:20px; }
}
@media all and (max-width:668px) {
	.visual												{ height:150px;  }
}
@media all and (max-width:468px) {
	.visual												{ height:100px; margin-top:10px; }
}

#content												{ position:relative; }
.lnb_wrap												{ position:absolute; width:100%; display:flex; justify-content:center; left:0; top:-100px; transition: var(--trans-ani); z-index:2;}
.lnb_wrap .lnb_box										{ width:max-content; position:absolute; left:50%; height:auto; display:flex; backdrop-filter:blur(14px); background:rgba(255,255,255,.8); border-radius:80px; padding:10px; 
															box-shadow:0 0 10px 0 rgba(0,0,0,.1); bottom:0; transform: translateX(-50%); max-width:1700px }
.mo_lnb_btn												{ display:none; }
.lnb_wrap .lnb_box ul									{ display:flex; flex-wrap:wrap; justify-content:center; }
.lnb_wrap .lnb_box ul>li>a								{ display:flex; height:50px; font-size:1.067rem; padding:0 25px; font-weight:700; color:var(--color-point); align-items:center; justify-content:center; 
															transition:var(--trans-ani); border-radius:80px; background:transparent}
.lnb_wrap .lnb_box ul>li.active>a,
.lnb_wrap .lnb_box ul>li>a:hover						{ background:var(--color-point); color:var(--color-white);  }
.lnb_wrap .lnb_box ul>li>a[target='_blank']::after		{ filter:invert(52%) sepia(80%) saturate(3353%) hue-rotate(160deg) brightness(75%) contrast(101%); margin-top:2px; }
.lnb_wrap .lnb_box ul>li>a[target='_blank']:hover::after,
.lnb_wrap .lnb_box ul>li.active>a[target='_blank']::after,
.lnb_wrap .lnb_box ul>li>a[target='_blank']:focus::after	{ filter:initial; }
@media all and (max-width:1868px) {
	.lnb_wrap .lnb_box									{ max-width:1600px; }
}
@media all and (max-width:1768px) {
	.lnb_wrap .lnb_box									{ max-width:1500px; }
}
@media all and (max-width:1668px) {
	.lnb_wrap .lnb_box									{ max-width:1400px; }
}
@media all and (max-width:1568px) {
	.lnb_wrap .lnb_box									{ max-width:1300px; }
	.lnb_wrap .lnb_box ul>li>a							{ padding:0 20px; font-size:1.03rem; }
}
@media all and (max-width:1468px) {
	.lnb_wrap .lnb_box									{ max-width:1200px; }
	.lnb_wrap .lnb_box ul>li>a							{ padding:0 15px; font-size:.95rem; }
	
}
@media all and (max-width:1168px) {
	.lnb_wrap											{ display:none; height:0; }
	.mo_lnb_btn											{ position:relative; display:flex; height:50px; border-radius:50px; backdrop-filter:blur(14px); background:rgba(255,255,255,.4); border-radius:80px; padding:10px; 
															box-shadow:0 0 10px 0 rgba(0,0,0,.1); align-items:center; justify-content:center; min-width:260px; }
	.mo_lnb_btn span									{ display:flex; width:100%; height:100%; border-radius:50px; background:var(--color-point); color:var(--color-white); padding:0 80px 0 20px; align-items:center; font-weight:700  }
	.mo_lnb_btn::before									{ position:absolute; right:30px; top:50%; width:7px; height:7px; border-style:solid; border-width:1px 1px 0 0; border-color:var(--color-white); transform:translateY(-50%) rotate(-45deg); 
																	transition:var(--trans-ani); content:''; top:calc(50% + 2px); z-index:2}
	.mo_lnb_btn.active::before							{ transform:translateY(-100%) rotate(-225deg);}
	.lnb_wrap .lnb_box									{ display:none; bottom:5px; max-width:inherit; width:260px; border-radius:15px;  }
	.lnb_wrap .lnb_box ul								{ flex-flow:column; padding-right:5px; overflow-y:auto; max-height:15em; justify-content:flex-start; }
	.lnb_wrap .lnb_box ul>li>a							{ height:inherit; padding:7px 15px; font-size:.98rem;}
	.lnb_wrap .lnb_box ul::-webkit-scrollbar 			{ -webkit-appearance:none; width:4px;} 
	.lnb_wrap .lnb_box ul::-webkit-scrollbar-thumb 		{ background-color:var(--color-point); border-radius:10px; } 
	.lnb_wrap .lnb_box ul::-webkit-scrollbar-track 		{ border-radius:10px; background-color:#e6e6e6; }
	.lnb_wrap .lnb_box ul>li>a[target='_blank']::after	{ margin-top:1px; }
}
@media all and (max-width:1024px) {
	.mo_lnb_btn											{ height:45px; padding:5px; min-width:220px; }
	.lnb_wrap .lnb_box									{ width:220px; border-radius:10px; }
	.lnb_wrap .lnb_box ul								{ max-height:13em;}
	.lnb_wrap .lnb_box ul>li>a							{ padding:7px 15px; font-size:.9rem;}
}	
@media all and (max-width:668px) {
	.mo_lnb_btn											{ height:40px;  }
}



/**********************************************************************

 								왼쪽 고정시

**********************************************************************/
.left_menu										{ position:sticky; top:7rem; display:flex; flex-flow:column; gap:1.5em; width:300px;  }
.left_menu strong								{ font-size:1.7rem; line-height: 1; font-weight:800; text-transform:uppercase  }
.tab_menu										{ display:flex; flex-flow:column; gap:20px;  }
.tab_menu>li									{ position:relative; }
.tab_menu>li>button								{ position:relative; display:flex; align-items:center; justify-content:center; font-size:1.067rem; font-weight:500; cursor:pointer; letter-spacing:.025em;  transition: var(--trans-ani);}
.tab_menu>li.active>button						{ color:var(--color-point); font-weight:700; font-size:1.267rem;  }
[data-subarea] .section							{ flex:9 1 0 }
[data-subarea].flex								{ display:flex; flex-wrap:nowrap; gap:1em 2em; justify-content:space-between; width:100%;}
[data-subarea] .between							{ display:flex; flex-wrap:nowrap; gap:1em 2em; justify-content:space-between; width:100%; }
[data-subarea] .between .flexd					{ flex:2 1 0; }
.mo_left_btn									{ display:none; }
@media all and (max-width:1368px) {
	.left_menu									{ width:200px; }
	.left_menu strong							{ font-size:1.5rem; }
	.tab_menu>li>button							{ font-size:1rem; text-align:left }
	.tab_menu>li.active>button					{ font-size:1.067rem; }
}

@media all and (max-width:1168px) {
	[data-subarea] .section						{ flex:100%; width:100%; }

	[data-subarea] .between						{ flex-wrap:wrap; }
	[data-subarea] .between .flexd				{ flex:100%; }
	.left_menu									{ position:inherit; top:inherit; width:100%; gap:1em;   }
	.left_menu strong							{ font-size:1.45rem; }
	.tab_menu									{ flex-flow:row wrap; gap:10px; }
	.tab_menu>li>button							{ font-size:.95rem;  }
	.tab_menu>li.active>button					{ font-size:1.03rem; }
	
	[data-subarea] .between .flexd				{ position:absolute; width:100%; display:flex; justify-content:center; left:0; top:-93px; transition:var(--trans-ani); z-index:4;}
	.mo_left_btn								{ position:relative; display:flex; height:65px; border-radius:50px; backdrop-filter:blur(14px); background:rgba(255,255,255,.4); border-radius:80px; padding:10px; 
													box-shadow:0 0 10px 0 rgba(0,0,0,.1); align-items:center; justify-content:center; min-width:260px; font-size:1.03rem }
	.mo_left_btn span							{ display:flex; width:100%; height:100%; border-radius:50px; background:var(--color-point); color:var(--color-white); padding:0 80px 0 20px; align-items:center; font-weight:700  }
	.mo_left_btn::before						{ position:absolute; right:30px; top:50%; width:7px; height:7px; border-style:solid; border-width:1px 1px 0 0; border-color:var(--color-white); transform:translateY(-100%) rotate(-225deg); 
														transition:var(--trans-ani); content:''; top:calc(50% + 1px); z-index:2}
	.mo_left_btn.active::before					{ transform:translateY(-50%) rotate(-45deg);}
	.left_menu									{ display:none; width:260px; border-radius:15px;  position:absolute; left:50%; height:auto; backdrop-filter:blur(14px); background:rgba(255,255,255,.8); 
													padding:25px; box-shadow:0 0 10px 0 rgba(0,0,0,.1); top:70px; transform:translateX(-50%);  }
	.left_menu strong							{ display:none; }
	.left_menu ul								{ flex-flow:column; padding-right:5px; overflow-y:auto; max-height:15em; justify-content:flex-start; }
	.left_menu ul>li>button						{ height:inherit; padding:7px 15px; font-size:.98rem; width:100%; text-align:center }
	.left_menu ul::-webkit-scrollbar 			{ -webkit-appearance:none; width:4px;} 
	.left_menu ul::-webkit-scrollbar-thumb 		{ background-color:var(--color-point); border-radius:10px; } 
	.left_menu ul::-webkit-scrollbar-track 		{ border-radius:10px; background-color:#e6e6e6; }
	.left_menu ul>li>a[target='_blank']::after	{ margin-top:1px; }
}
@media all and (max-width:568px) {
	.mo_left_btn								{ font-size:.98rem; }
	.mo_left_btn span							{ padding:0 40px 0 15px; }
}
@media all and (max-width:320px) {
	.mo_left_btn								{ font-size:.9rem; }
}


/* 테이블 */
table														{ border-spacing:0; border-collapse:collapse; color:var(--color-base);}
table.table													{ width:100%; border-top:2px solid var(--color-point);}
table.table thead th										{ padding:15px 10px; background:#f3f3f3; border:1px solid #ddd; font-weight:600; font-size:1.06em}
table.table thead tr:nth-of-type(1) th						{ border-top-width:0px; }
table.table thead tr.none th								{ border-bottom-width:0px;}
table.table thead tr.none + tr th							{ border-top:1px solid var(--color-line);}
table.table thead th[rowspan]								{ border-right:1px solid var(--color-line);}
table.table tbody th										{ background-color:#f8f9fa; border:1px solid var(--color-line); }
table.table th,
table.table td												{ padding:15px 10px; letter-spacing:-0.5px; line-height:1.4; word-break:keep-all; }
table.table td .small										{ font-size:.75em; }
table.table td.bg_light_blue								{ background:var(--color-light-blue); }
table.table td strong										{ font-weight:700 }
table.table th												{ text-align:center; }

/* tbody */
table.table thead + tbody tr td								{ text-align:center;}
table.table tbody td										{ background:#fff; border:1px solid #ddd;text-align:left; border-top:none}
table.table tbody tr td:nth-of-type(1),
table.table tbody tr th:nth-of-type(1),
table.table thead tr th:nth-of-type(1)						{ border-top-width:0px; border-left-width:0;}
table.table tbody tr td:nth-last-of-type(1),
table.table tbody tr th:nth-last-of-type(1),
table.table thead tr th:nth-last-of-type(1)					{ border-right-width:0;}
table.table tbody th										{ background:#fafafa; font-weight:400 }
table.table tbody tr th:nth-of-type(1)						{ border-right-width:1px; }
table.table tbody tr th:nth-of-type(2):nth-last-of-type(1) 	{ border-right-width: 1px; }
table.table tbody tr .line_left								{ border-left-width: 1px !important; }
table.table tbody td.bg_light_blue							{ background:#f3fafb; }
table.table tbody td.bg_light_green							{ background:#f3fbf3; }
table.table tbody td.bg_light_yellow						{ background:#fbfbf3; }
table.table tbody td.bg_light_purple						{ background:#fbf3fb; }
table.table td:has(.ab)										{ position:relative; }
table.table .ab												{ position:absolute; width:100%; height:100%; left:0; top:0; display:flex; flex-direction:column; }
table.table .ab>li											{ display:flex; align-items:center; justify-content:center; height:50%; }
table.table .ab>li+li										{ border-top:1px solid #ddd; }


/* table scroll mobile */
#content .scrollTable									{ width:100%;}
#content .mob_info										{ display:none; position:relative; width:100%; box-sizing:border-box; margin-top:10px; padding:10px; font-size:.9rem; background:var(--color-light-gray); border-radius:5px; gap:5px; 
																align-items:center; line-height:1 }
#content .mob_info:before								{ content:''; display:inline-block; width:13px; height:13px; background:url(/resource/shilhouse/images/common/icon_drag.svg) no-repeat 50% 50% / contain; opacity:.74; margin-top:-1px;}

/* 내용이 긴 table */
table.table.break-all thead th,
table.table.break-all tbody td							{ word-break:break-all;}

@media all and (max-width:1024px) {
	/* 테이블 */
	table.table tbody th, 
	table.table td									{ font-size:.92rem; }
    #content .scrollTable							{ overflow:auto;}
    #content .scrollTable .table					{ width:1024px; margin-top:0px;}
    #content .mob_info								{ display:flex; margin-bottom:5px;}
    table.table thead th							{ padding:13px 9px;}
	table.table .basic_ul>li						{ font-size:.92rem; }
	table.table .basic_ul>li+li						{ margin-top:5px; }
	table.table .basic_ul>li:before					{ top:6px; }
}
.facility>.program_top>.info>.program_list				{ counter-reset:title; }
.facility>.program_top>.info>.program_list>li::after	{ display:none; }
.facility>.program_top>.info>.program_list>li::before	{ counter-increment: title; content: counter(title) " "; display: flex; justify-content: center; align-items: center; font-size:.7rem; color:var(--color-white); line-height:23px; }
