@charset "utf-8";
/* 
* content CSS Document
* KOWEB
*/

/* header */
/* nav > .gnb{ display: none; } */

:root{
	/* --border-color: #111; */
	--border-color: #fff;
}

/* #region utilities */
/* .bg-color-science{ background: #9cc0e6; }
.bg-color-math{ background: #d9bdda; }
.bg-color-maker{ background: #f29d8a; }
.bg-color-environment{ background: #9cd0a3; }
.bg-color-invention{ background: #f7d274; }
.bg-color-organizations{ background: #a8d9d2; } */
#sub_contents .bg-color-science{ background: #4d92ce; }
#sub_contents .bg-color-math{ background: #8d70b0; }
#sub_contents .bg-color-maker{ background: #d94b23; }
#sub_contents .bg-color-environment{ background: #32b370; }
#sub_contents .bg-color-invention{ background: #eda517; }
#sub_contents .bg-color-organizations{ background: #24a79b; }
#sub_contents .bg-color-artist{ background: #d64881; }
#sub_contents .bg-color-black{ background: #1a1c2b; }
#sub_contents .bg-color-white{ background: #fff; }
#sub_contents .color-black{ color: var(--black); }
#sub_contents .color-white{ color: var(--white); }
#sub_contents .text-center{ text-align: center; }
#sub_contents .font-normal{ font-weight: 400; }
/* #endregion utilities */


/* sub visual */
.subVisual{ contain: content; padding-top: 208rem; }
.subVisual__inr{ padding-bottom: 67rem; border-bottom: 1px solid #ddd; }
.subVisual__h2{ text-align: center; font-size: var(--fs45); font-weight: 800; }
.subVisual__control{ margin-top: -18rem; display: grid; grid-template-columns: auto auto; justify-content: space-between; }
.subVisual__circle{ display: inline-flex; align-items: center; justify-content: center; width: 50rem; height: 50rem; border: 1px solid currentColor; border-radius: 50%; font-size: 15rem; font-weight: 500; color: #333; }
.subVisual__circle::before{ content: ''; display: inline-block; width: 7rem; height: 7rem; border: solid currentColor; border-width: 1px 1px 0 0; }
.prev .subVisual__circle::before{ transform: translateX(2rem) rotate(-135deg); }
.next .subVisual__circle::before{ transform: translateX(-2rem) rotate(45deg); }
.subVisual__btn{ display: inline-flex; align-items: center; gap: 14rem; }
.subVisual__btn[aria-hidden="true"]{ color: #888; }
.subVisual__btn[aria-hidden="true"] .subVisual__circle{ border-color: #ddd; }
.subVisual__btn[aria-hidden="true"] .subVisual__circle::before{ border-color: #aaa; }
.lnb{ font-weight: 600; }
.lnb .sub_menu{ margin-top: 9rem; display: flex; justify-content: center; align-items: center; gap: 4.7ch; font-size: var(--fs18); font-weight: 700; color: rgba(0, 0, 0, 0.4);}
.lnb .on{ position: relative; color: var(--primary);}
.lnb .on::before{ content: ''; position: absolute; inset: auto 0 -6rem; border-bottom: 2px solid currentColor; }
@media(max-width:1080px){
	nav > .gnb{ display: none; }
}
@media(max-width:767px){
	.subVisual__control{ display: none; }
	.subVisual__h2 {font-size: var(--fs40);}
	.lnb{ margin-top: 40rem; overflow: auto clip; margin-inline: -4vw; padding-inline: 4vw; white-space: nowrap; }
	.lnb .sub_menu{ width: fit-content; }
}


/* common content */
#content{ min-height:300px; padding: 100rem 0; }
.sub_title { margin-bottom: 60rem;}
.sub_dot {display: flex; justify-content: center; align-items: center; margin-bottom: 10rem;}
.sub_dot span {width: 10rem; height: 10rem; border-radius: 50%; background: var(--primary);}
.sub_dot span:last-child {background: #036eb8;}
.sub_title h2{ text-align:center; font-size:var(--fs35); font-weight: 700;}
.sub_h3 {font-size: var(--fs24); font-weight: 600;}
.common_table{ border-top: 2px solid #222; text-align: center; }
.common_table :is(th, td){ padding: 14rem 1em 12rem; border: 1rem solid #e5e5e5; }
.common_table col:is(:nth-of-type(1), :nth-of-type(2)){ width: 18.33333333%; }
.common_table :is(th, td):first-child{ border-left: 0; }
.common_table :is(th, td):last-child{ border-right: 0; }
.common_table :is(thead, tfoot){ background: #f6f7f9; font-size: 17rem; font-weight: 500; }

@media(max-width:767px){
	#content {padding: 50rem 0;}
	.sub_title {margin-bottom: 25rem;}
	.sub_h3 {font-size: 18rem}
}

.dot_list {}
.dot_list dd {position: relative; padding-left: 16rem;}
.dot_list dd:before {position: absolute; content: ''; top: 8rem; left: 0; width: 6rem; height: 6rem; border-radius: 50%; border: 1rem solid var(--border-color);}
.dot_list dd + dd {margin-top: 12rem;}

/* about1 소개*/
.about1 {display: flex; justify-content: center; gap: 100rem;}
.about1 > div {}
.about1 .about1_img{}
.about1 .about1_img img{width: 100%; max-width: 100%; max-height:650rem;}
.about1 .about1_text {}
.about1 .about1_text h2 {font-size: var(--fs45); font-weight: 800; margin-bottom: 30rem;}
.about1 .about1_text span {display: block; font-size: var(--fs20); font-weight: 600; margin-bottom: 10rem;}
.about1 .about1_text p {font-size: var(--fs17); line-height: 1.8;}
.about1 .about1_text dl {padding: 30rem; box-sizing: border-box; border-radius: 8rem; border: 1rem dashed #ccc; margin-top: 50rem;}
.about1 .about1_text dd {font-size: var(--fs17);}
/* about2 개요 */
.about2 {}
.about2 .ss01 {font-size: var(--fs17); padding: 30rem; box-sizing: border-box; border: 1rem dashed #ccc; border-radius: 8rem; margin-bottom: 25rem;}
.about2 .ss01 strong {font-weight: 600;}
.about2 .ss02 {}
.about2 .ss02 th {font-size: var(--fs17); font-weight: 600; }
.about2 .ss02 thead {border-top: 1rem solid #555;}
.about2 .ss02 thead th { padding: 12rem 10rem; background: #f5f5f5; border-left: 1rem dashed #ccc; border-bottom: 1rem dashed #ccc;}
.about2 .ss02 thead th:first-child {border-left: 0;}
.about2 .ss02 tbody th,
.about2 .ss02 tbody td {padding: 10rem; text-align: center; border-bottom: 1rem dashed #ccc; box-sizing: border-box; border-left: 1rem dashed #ccc; }
.about2 .ss02 tbody tr:last-child {border-bottom: 1rem solid #555;}
.about2 .ss02 tbody td p + p {margin-top:3rem;}
.about2 .ss02 tbody th {border-left: 0;}

/* about3 오시는길 */
.about3 {}
.about3 .map_img {}
.about3 .map_img .root_daum_roughmap {width: 100%;}
.about3 .map_img .root_daum_roughmap .wrap_map {height: 500rem; border-bottom: 1rem solid rgba(0, 0, 0, 0.1);}
.about3 .map_img .root_daum_roughmap .wrap_controllers {display: none;}
/* .about3 .map_info {position: relative; padding: 25rem 10rem; margin: -30rem 60rem 0 60rem; box-sizing: border-box; background: #1a1c2b; color: #fff; z-index: 10; box-shadow: 5rem 5rem 20rem rgba(0, 0, 0, 0.15); overflow: hidden;} */
.about3 .map_info {position: relative; padding: 25rem 10rem; margin: -30rem 60rem 0 60rem; box-sizing: border-box; background: #fff; color: #1a1c2b; z-index: 10; box-shadow: 5rem 5rem 20rem rgba(0, 0, 0, 0.15); overflow: hidden;}
.about3 .map_info:before {content: ''; position: absolute; top: 5%; right: 5%; width: 150rem; height: 150rem; background: url(/images/common/logo.svg) no-repeat; opacity: 0.03;}
.about3 .map_info ul {display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10rem 60rem;}
.about3 .map_info li {font-size: var(--fs16); font-weight: 200; display: flex; align-items: center; gap: 12rem;}
.about3 .map_info img {height:16rem;}

@media(max-width:1080px){
	.about1 {gap: 50rem;}
}

@media(max-width:767px){
	.dot_list dd + dd {margin-top: 8rem;}
	.about1 {flex-direction: column; gap: 30rem;}
	.about1 .about1_img img {height: initial;}
	.about1 .about1_text span {font-size: 18rem; margin-bottom: 6rem;}
	.about1 .about1_text h2 {margin-bottom: 20rem; font-size: 25rem;}
	.about1 .about1_text p br {display: none;}
	.about1 .about1_text dl {padding: 15rem; margin-top: 25rem;}
	.about2 .ss01 {padding: 20rem;} 
	.about3 .map_img .root_daum_roughmap .wrap_map {height: 400rem;}
	.about3 .map_info {padding: 20rem 10REM; margin: -50rem 15rem 0 15rem; text-align: center; }
	.about3 .map_info:before {right: -6%;}
	.about3 .map_info h3 {margin-bottom: 15rem; font-weight: 500;}
	.about3 .map_info ul {flex-direction: column; justify-content: center; gap: 10rem 30rem; }
	.about3 .map_info li {font-size: 14rem; gap: 5rem;}
	.about3 .map_info img {height: 13rem;}
}

/* program1 참여부스 */
.program1 h3 { margin-bottom: 20rem;}
.program1 .program_day {margin-left: 5rem; display: inline-block; width: 23rem; height: 23rem; line-height: 23rem; border-radius:2rem;  font-size: 14rem; color: #fff; text-align: center;}
/* .program_table col:nth-child(1) { width: 10%; }
.program_table col:nth-child(2) { width: 30%; }
.program_table col:nth-child(3) { width: 60%; } */
/* .program_table col:nth-child(4) { width: 10%; } */
.program_table table {border: 1rem solid var(--border-color);}
.program_table thead {background: #1a1c2b;}
.program_table thead th {padding: 10rem; font-size: var(--fs17); font-weight: 500; color: #fff; border-left: 1rem solid rgba(255, 255, 255, 0.25);}
.program_table th:first-child {border-left: 0;}
.program_table th,
.program_table td {padding: 10rem 15rem; font-size: 15rem; text-align: center; box-sizing: border-box; }
.program_table tbody > div {border: 2rem solid var(--border-color);}
.program_table tbody tr:not(:last-child) td { border-bottom: 1rem solid #ddd;}
.program_table tbody tr:first-child th {border-right: 1rem solid #ddd;}
.program_table tbody th {font-size: var(--fs17); border-bottom: 1rem solid #ddd;}
.program_table tbody th.b_none {border-bottom: 0}
.program_table tbody td {border-left: 1rem solid #ddd;}
.program_table tbody td:last-child {text-align: left;}

/* program2 행사배치도 */
.program2 .ss01 {border: 1rem solid var(--border-color); margin-bottom: 50rem;}
.program2 .ss01_img {padding: 20rem; box-sizing: border-box;}
.program2 .ss01_img img {max-width: 100%;}
.program2 .ss01_img .floor-plan-image{ display: block; margin-inline: auto; width: 100%; max-width: 680rem; height: auto; }
.program2 .ss01_img img.mo {display: none;}
.program2 .program_area {display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10rem 40rem; padding: 20rem 0; border-top: 1rem dotted #ccc; box-sizing: border-box;}
.program2 .program_area li {display: flex; align-items: center; gap: 10rem; }
.program2 .program_area li strong {font-size: var(--fs17); font-weight: 500;}
.program2 .program_area li span {border-radius: 2rem; display: block; width: 22rem; height: 22rem;}
/* .program2 .program_area li:nth-child(1) span {background: #ec6b32;}
.program2 .program_area li:nth-child(2) span {background: #4fb233;}
.program2 .program_area li:nth-child(3) span {background: #036eb8;}
.program2 .program_area li:nth-child(4) span {background: #bd4776;} */
.program2 .table-note-block{ margin-bottom: clamp(10rem, 1.42857143vw, 20rem); display: flex; justify-content: end; align-items: center; gap: 0.25lh 2ch; font-size: clamp(12rem, 1.14285714vw, 16rem); }
/* .program2 .table-heading-block .program_day{ vertical-align: baseline; } */
.program2 .sub_h3 {margin-bottom: 20rem;}
.program2 .ss02 {display: grid; grid-template-columns: repeat(2,1fr); gap: 40rem 20rem;}
/* .program2 div + div {margin-top: 30rem;} */
/* .program2 .program_day {margin-left: 5rem; display: inline-block; width: 23rem; height: 23rem; line-height: 23rem; border-radius:2rem;  font-size: 14rem; color: #fff; text-align: center;} */
.program2 .program_day { display: inline-block; width: 1.64285714em; height: 1.64285714em; line-height: 1.64285714em; border-radius:2rem;  font-size: 0.875em; color: #fff; text-align: center;}
.program2 .program_day { margin-inline: 0 1ch; }
/* .program2 .program_day.orange {background: #ec6b32; }
.program2 .program_day.green {background: #4fb233; }
.program2 .program_day.blue {background: #036eb8; }
.program2 .program_day.pink {background: #bd4776; }
.program2 .program_table.pr_A thead {background: #ec6b32;}
.program2 .program_table.pr_B thead {background: #4fb233;}
.program2 .program_table.pr_C thead {background: #036eb8;}
.program2 .program_table.pr_D thead {background: #bd4776;} */
.program2 .program_table table {border: 1rem solid var(--border-color);}
.program2 .program_table tbody td:first-child {border-left: 0;}

/* program3 프로그램 일정표 */
.program3 .sub_h3 {margin-bottom: 15rem;}
.program3 .sched_table {margin-bottom: 40rem;}
.program3 .sched_table table {border: 1rem solid var(--border-color); box-sizing: border-box;}
.program3 .sched_table col:nth-child(1){ width: 10%; }
.program3 .sched_table col:nth-child(2){ width: 15%; }
.program3 .sched_table col:nth-child(3){ width: 15%; }
.program3 .sched_table col:nth-child(5){ width: 20%; }
.program3 .sched_table thead {background: #036eb8; color: #fff; }
.program3 .sched_table thead th {padding: 12rem 10rem; font-size: var(--fs16); font-weight: 500; border-right: 1rem solid rgba(255, 255, 255, 0.3); }
.program3 .sched_table thead th:last-child {border-right: 0;}
.program3 .sched_table tbody th,
.program3 .sched_table tbody td {font-size: var(--fs16); padding: 10rem; text-align: center; box-sizing: border-box; }
.program3 .sched_table tbody th {border-top: 1rem solid #ddd; font-weight: 500; background: #f5f5f5;}
.program3 .sched_table tbody td {border-top: 1rem solid #ddd; border-left: 1rem solid #ddd;}
.program3 .sched_guest {display: flex; gap: 10rem; text-align: center; width: 100%;}
.program3 .sched_guest ul {display: flex; gap: 10rem;}
.program3 .sched_guest .img {}
.program3 .sched_guest .img.lol {display: grid; grid-template-columns: repeat(3,1fr); gap: 10rem; }
.program3 .sched_guest .img img {max-width: 100%; width: 100%; height: 300rem; object-fit: cover;}
.program3 .sched_guest p {font-size: var(--fs17); font-weight: 600; padding: 10rem 0; border: 1rem solid var(--border-color); box-shadow: 3rem 3rem #036eb8; margin-bottom: 12rem;}
.program3 .sched_guest span {display: block; padding: 8rem 0; font-weight: 600; box-sizing: border-box; border: 1rem solid var(--border-color); box-shadow: 3rem 3rem #036eb8; margin-top: 10rem;}
.program3 .sched_guest .day1 {width: 35%;}
.program3 .sched_guest .day2 {width: 65%;}
.program3 .sched_guest .day1 ul li {width: 55%;}
.program3 .sched_guest .day2 ul li:nth-child(1) {width: 25%;}
.program3 .sched_guest .day2 ul li:nth-child(2) {width: 75%;}


@media(max-width:767px){
	.program_table thead th {padding: 8rem;}
	.program_table thead th, .program_table th, .program_table td {font-size: 12rem; padding: 8rem;}
	.program1 {grid-template-columns: repeat(1,1fr); gap: 25rem;}
	.program1 h3 {margin-bottom: 10rem;}
	.program1 .program_table colgroup col:first-child {display: none;}
	.program1 .program_table thead th:first-child,
	.program1 .program_table tbody th {display: none;}
	.program1 .program_day {width: 18rem; height: 18rem; line-height: 18rem; font-size: 13rem; font-weight: 200; margin-left: 2rem; text-align: center;}
	/* program2 */
	/* .program2 div + div {margin-top: 20rem;} */
	.program2 .ss02 {grid-template-columns: repeat(1,1fr); gap: 20rem;}
	.program2 .ss01_img {}
	.program2 .ss01_img img.pc {display: none;}
	.program2 .ss01_img img.mo {display: block;}
	.program2 .program_area {gap: 8rem 12rem; padding: 15rem 0;}
	.program2 .program_area li span {width: 16rem; height: 16rem;}
	.program2 .program_area li strong {font-size: 14rem; font-weight: 500;}
	.program2 .sub_h3 {margin-bottom: 10rem;}
	/* program3 */
	.program3 .sched_table colgroup{ display: none; }
	.program3 .sched_table thead th {padding: 8rem 5rem;}
	.program3 .sched_table tbody th, .program3 .sched_table tbody td {padding: 10rem 5rem;}
	.program3 .sched_guest {flex-wrap: wrap;}
	.program3 .sched_guest ul {gap: 5rem;}
	.program3 .sched_guest .day1,
	.program3 .sched_guest .day2 {width: 100%;}
	.program3 .sched_guest .day1 ul li {width: 50%;}
	.program3 .sched_guest .img.lol {gap: 5rem;}
	.program3 .sched_guest span {font-size: 14rem; font-weight: 500;}
	/* .program3 .sched_guest .day1 ul {display: grid; grid-template-columns: repeat(2,1fr);} */
}

/* 체험부스 */
.page-interactive-organizations{
	.visually-hidden{ contain: content; position: absolute; width: 0; height: 0; clip-path: rect(0 0 0 0); }
	.ss02{ display: block; overflow-x: auto; }
	.program_table{ min-width: 80ch;
		:where(th, td):first-child{ border-left: 0; }
	}
	.grid{ display: grid; gap: 0.25lh; }
	.grid--column-25p{ grid-template-columns: 25% 1fr; }
	.grid--column-30p{ grid-template-columns: 30% 1fr; }
	.grid--column-40p{ grid-template-columns: 40% 1fr; }
	.grid--column-2{ grid-template-columns: repeat(2, 1fr); }
	.grid--column-3{ grid-template-columns: repeat(3, 1fr); }
	.grid--column-4{ grid-template-columns: repeat(4, 1fr); }
	.grid--math-7{ grid-template-columns: 234fr 120fr 92fr 84.5fr; }
	.mt-025lh{ margin-top: 0.25lh; }
	.mb-025lh{ margin-bottom: 0.25lh; }
	table{
		img{ display: block; width: 100%; height: auto; }
		img[width]{ display: block; max-width: 100%; width: auto; height: auto; }
		figcaption{ text-align: center; }
	}
	.activity-table *{ border: 1px solid currentColor; padding: 0.25lh 1ch; }
	.activity-table :is(th, td:not(:nth-child(3))){ text-align: center; }
	.activity-table tbody tr:last-child > *{ border-bottom: currentColor; }
	@media (width < 768px){
		&.program1 .program_table thead th:first-child,
		&.program1 .program_table tbody th{
			display: table-cell;
		}
	}
}