@charset "utf-8";
body {min-width:300px;min-height: 100dvh;font-size: 1.6rem;background-color:#fff;}

/* sub layout */
#wrap_sub {position:relative;width: 100%;height: 100vh;max-width: 768px;min-height: 100%;margin: 0 auto;}
#wrap_sub #header,
#wrap_sub .content_top {
	left: 50%;
	transform: translateX(-50%);
	max-width: 768px;
}
#wrap_sub #header,
#wrap_sub #header .header {background-color: #FDDD30;}
#wrap_sub .container {position: relative;top: 5.45rem;width: 100%;max-width: 768px;margin: 0 auto;padding-bottom: env(safe-area-inset-bottom, 0);}
#wrap_sub .container #content{margin: 0 auto;}
#wrap_sub .content_top {position:fixed;top: 5.45rem;width:100%;margin:0 auto;background-color: #fff;z-index:400;}

/* title style */
h3.h3 {display: inline-flex;align-items: center;justify-content: center;height: 3rem;padding: 0 1.5rem;font-family: 'Gmarket-Medium' !important;font-size: 1.4rem;line-height: 1;color: #fff;background-color: #1AAC5E;border-radius: 999rem;-webkit-border-radius: 999rem;}
h4.h4 {position: relative;display: inline-block;padding-left: 2.15rem;font-family: 'Gmarket-Medium' !important;font-size: 1.4rem;line-height: 2rem;color: #1E2124;}
h4.h4::before {position:absolute;top: 0;left: 0;content:'';width: 18px; height: 18px;background-image: url("/images/themepark/leaflet/icon_h4.svg");background-position: 0 0;background-repeat: no-repeat;background-size: cover;}

/* list style */
.list1 {margin: 1rem 0;padding: 0;}
.list1 > li {position: relative;margin-bottom: 0.5rem;padding: 0 0 1rem 1.25rem;line-height: 2rem;color: #464C53;border-bottom: 1px dashed #B1B8BE;word-break: keep-all;}
.list1 > li::before{content:'';position:absolute; left: 3px; top: 8px;width: 4px;height: 4px;background-color: #1E2124;border-radius: 999px;-webkit-border-radius: 999px;}
.list1 > li span {position:absolute; left: 1rem; top: 3px;width: 6rem;font-weight: 500;line-height: 1.5rem;color: #000;}

.list2 {margin: 0.75rem 0;padding: 0;}
.list2 > li {position: relative;margin-bottom: 0.5rem;padding-left: 1.25rem;font-size: 1.5rem;line-height: 2rem;color: #1E2124;word-break: keep-all;}
.list2 > li::before{content:'';position:absolute; left: 0; top: 9px;width: 6px; height: 1px;background-color: #1E2124;}
.list2 > li span {position:absolute; left: 1rem; top: 0;color: #000;}

.list1 > li:has(span),
.list2 > li:has(span) {padding-left: 8rem;}
.list1 > li:last-child,
.list2 > li:last-child {margin-bottom: 0;}
.list1 > li:has(.list2) {margin-top: 1.5rem;}

/* tab style */
.tab_list ul{display:flex;justify-content: center;align-items: center;height: 5rem;margin: 0;padding: 0;background-color: #FFF;border-bottom: 1px solid #E6E8EA;}
.tab_list ul li{margin: 0;padding:0;}
.tab_list ul li a{display:block;min-width: 120px;padding: 0.75rem 1rem;font-size: 1.5rem;color: #464C53;text-align:center;border-radius: 99rem;-webkit-border-radius: 99rem;}
.tab_list ul li.active a{font-weight: 700;color: #000;background-color: #F4F5F6;}

/* table style */
.tblType1{margin: 0;padding: 0;}
.tblType1 table {width:100%;border-collapse: collapse; }
.tblType1 table thead th{padding: 0.75rem;font-weight: 600;color: #1E2124;text-align:center;background-color: #D6E0EB;}
.tblType1 table tbody th, 
.tblType1 table tbody td{
	padding: 0.75rem;
	font-weight:500;text-align:center; 
	border-bottom:1px dashed #D6E0EB;
}
.tblType1 table tbody tr:last-child th,
.tblType1 table tbody tr:last-child td {border-bottom: 0;}

.tblType2{margin: 0;padding: 0;border:1px solid #D6E0EB;}
.tblType2 table {width:100%;border-collapse: collapse;}
.tblType2 table thead th,
.tblType2 table tbody th {padding: 0.75rem;font-weight: 600;color: #1E2124;text-align:center;vertical-align: middle;background-color: #ECF2FE;border-bottom:1px dashed #D6E0EB;}
.tblType2 table tbody td{
	padding: 0.75rem;
	font-weight:500;text-align:center; color: #464C53;
	border-bottom:1px dashed #D6E0EB;
}
.tblType2 table tbody tr:last-child th,
.tblType2 table tbody tr:last-child td {border-bottom: 0;}

/* box style */
.box1 {background-color: #FFF;border:1px solid #C9D2DB;border-radius: 0.5rem;-webkit-border-radius: 0.5rem;}
.box2 {background-color: #F4F5F6;border-radius: 0.5rem;-webkit-border-radius: 0.5rem;}
.box3 {background-color: #F9F9F9;border-radius: 0.5rem;-webkit-border-radius: 0.5rem;}
.box4 {background-color: #E7F6F0;border: 1px solid #0AA468;border-radius: 0.5rem;-webkit-border-radius: 0.5rem;}
.pd1rem{padding: 1rem !important; margin: 0.75rem 0;}
.pd15rem{padding: 1.5rem !important; margin: 0.75rem 0;}
.pd2rem{padding: 2rem !important; margin: 0.75rem 0;}

.badge {display: inline-block;padding-left: 2rem;font-size: 1.4rem; color: #009C9A; white-space: nowrap;background: url('/images/themepark/leaflet/icon_info.svg') 0 center no-repeat;background-size: 20px;}
.note {display: inline-block;padding-left: 0.25rem;font-size: 1.4rem; color: #464C53;}


#content_body {position:relative;width: 100%;margin: 0 auto;padding: 0;}
.cont_head {width: 94%;margin:0 auto; padding: 4rem 0;display: flex;flex-direction: column;gap: 1.5rem;}
.cont_head p {margin: 0; padding: 0;font-weight: 500; color: #1E2124;}
.cont_head p strong {font-family: 'Gmarket-Medium' !important;font-size: 2.4rem; font-weight: 500;line-height: 3rem; color: #000;}
.cont_head p span {display: inline-block;margin-right: 0.5rem;padding: 0.25rem 1rem;font-weight: 600;color: #1E2124;background-color: #FDDD30;border-radius: 0.5rem;-webkit-border-radius: 0.5rem;}
.emy {color: #C2670F;}
.bg_gray {background-color: #F4F5F6;}

/* 시설이용 */
.guide {position: relative; width: 96%;margin:0 auto 2rem;padding: 0 2%;}
.guide .guide_img {
	margin-top: 2.5rem;
	border-radius: 1.25rem;
	overflow: hidden;
	background-color: #DCE3EA;
}
.guide .guide_img img {
	display: block;
	width: 100%;height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
.guide .guide_mascot {
	position: absolute;
	right: 2rem; bottom: -2rem;
	width: 150px; height: auto;
	pointer-events: none;	
	opacity: 0;
	animation: fadeIn 1s linear forwards,
             	jump 2s linear infinite 5s;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes jump {
  0%   { transform: translateY(0); }
  5%   { transform: translateY(-20px); }
  10%  { transform: translateY(0); }
  100% { transform: translateY(0); }
}

.guide_cont {display: flex; flex-direction: column; gap: 1rem;margin-bottom: 1.5rem; padding: 0;}
.guide_cont .head {display: flex; align-items: center; gap: 0.5rem;}	
.guide_cont .body {display: flex; flex-direction: column;gap: 0.5rem;padding: 0 1rem;color: #1E2124;}
.guide_cont .body p {font-weight: 500;}	
.guide_list {margin-bottom: 1rem;padding: 0;}
.guide_list > li {position: relative;margin: 0.5rem 0;padding-left: 1.25rem;}
.guide_list > li::before{
	content:'';
	position:absolute; left: 0.25rem; top: 0.65rem;
	width: 4px; height: 4px;
	background-color: #464C53;
	border-radius: 999rem;-webkit-border-radius: 999rem;
}
.guide_list strong {font-weight: 700;}
	
.guide_box {
	display: flex;flex-direction: column;gap: 0.5rem;
	margin-top: 1rem;padding: 1rem;
	background-color: #E7F6F0;
	border: 1px solid #0AA468;
	border-radius: 0.5rem;-webkit-border-radius: 0.5rem;
}
.guide_box > li {position: relative;margin: 0;font-size: 1.4rem;color: #0AA468;}	
.map{margin: 0;padding: 0;overflow: hidden;background-color: #eeeff0;border-radius: 1rem;-webkit-border-radius: 1rem;}
.map img{display: block;width: 100%;height: auto;}

/* 실내놀이터 */
.floor_info {
	margin-top: 2rem;padding: 0;
	display: flex;	
	justify-content: space-between;
	gap: 4rem;
}
.floor_info .floor_desc {
	width: calc(38% - 2rem);
	margin-top: 0.5rem;
	display: flex; flex-direction: column; gap: 0.5rem;
}
.floor_info .floor_desc li {
	margin: 0;padding: 0.25rem;
	display: flex;
	align-items: center; gap: 0.75rem;
	font-size: 1.5rem; color: #1E2124;
	border-bottom: 1px dashed #58616A;
}
.floor_info .floor_desc li img {width: 2rem;}
.floor_info .floor_img {width: 62%;}

.floor_wrap {width: 94%;margin:0 auto 2rem; padding: 0;display: flex;flex-direction: column;gap: 0.75rem;}
.floor .floor_head {
	position: relative;
	width: 100%;
	margin: 0;padding: 1.5rem 2rem;
	font-size: 1.7rem; font-weight: 700; text-align: left; color: #1E2124;
	border: 1px solid #CDD1D5;
	border-radius: 0.75rem;-webkit-border-radius: 0.75rem;
	cursor: pointer;
}
.floor .floor_head::after {
	content: "";
	position: absolute;
	right: 2rem;
	top: 50%;
	width: 1em;
	height: 1em;
	transform: translateY(-50%);
	background-image: url("/images/themepark/leaflet/icon_arrow_open.svg");
	background-repeat: no-repeat;
	background-size: contain;  
	transition: transform 0.2s ease;
}
.floor.is-open .floor_head::after {
	background-image: url("/images/themepark/leaflet/icon_arrow_close.svg");
}
.floor.is-open .floor_head {
	border-radius: 0.75rem 0.75rem 0 0;-webkit-border-radius: 0.75rem 0.75rem 0 0;
}
.floor .floor_cont {
	position: relative;
	max-height: 0;
	transition: max-height 0.3s ease;
	overflow: hidden;
 }
.floor.is-open .floor_cont {
	marign: 0;padding: 3rem;
	border: 1px solid #CDD1D5;border-top: 0;
	border-radius: 0 0 0.75rem 0.75rem;-webkit-border-radius: 0 0 0.75rem 0.75rem;
	background-color: #F4F5F6;
}
.floor_cont .fac_list {margin: 1rem 0;padding: 0;display: flex;flex-wrap: wrap;column-gap: 0;row-gap: 0.95rem;}
.floor_cont .fac_list li {width: 50%;}
.floor_cont .fac_list li button {display: flex;align-items: center;gap: 0.5rem;font-size: 1.5rem;font-weight: 500;color: #1E2124;}
.floor_cont .fac_list li button span {
	display: block;
	width: 2rem;height: 2rem;
	margin: 0;padding: 0;
	font-size: 1.2rem;font-weight: 700;line-height: 2rem;
	color: #fff;text-align: center;
	border-radius: 3px;-webkit-border-radius: 3px;
}
.floor_map {position: relative;}
.floor_cont .fac_marker {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 5;
}
.floor_cont .fac_marker li {
  position: absolute;
  pointer-events: auto;
}
.floor_cont .fac_marker li button.map_marker {
  position: absolute;
  transform: translate( -50%, -50%);
  width: 2.5rem; height: 2.5rem;
  display: flex;
  align-items: center; justify-content: center; 
  font-size: 1.4rem;font-weight: 700;
  color: #fff;
  border: none;
  border-radius: 3px;-webkit-border-radius: 3px;
  cursor: pointer;
  z-index: 10;  
  transition: opacity 0.3s ease;
}
.floor:not(.is-open) .fac_marker li button.map_marker {
  opacity: 0;
  pointer-events: none;
}
.floor[data-floor="1F"] .fac_list li button span,
.floor[data-floor="1F"] .map_marker {background-color: #7fac61;}
.floor[data-floor="2F"] .fac_list li button span,
.floor[data-floor="2F"] .map_marker {background-color: #a691c4;}
.floor[data-floor="3F"] .fac_list li button span,
.floor[data-floor="3F"] .map_marker {background-color: #008cc9;}
.floor[data-floor="4F"] .fac_list li button span,
.floor[data-floor="4F"] .map_marker {background-color: #595757;}

/* 실외놀이터 지도 */
#map_wrap{
	position:relative;
	width: min(100%, 768px);
	height: calc(100dvh - 180px);
	background-color: #222;overflow:hidden;
	touch-action: none; /* 터치 드래그/휠을 위한 기본 제스처 방지 */
}
.map_viewport{position:absolute; inset:0; overflow:hidden;}
.map_canvas{
	position:absolute; left:0; top:0;
	transform-origin: 0 0; /* 좌상단 기준 */
	will-change: transform;
} 
/* 지도 이미지 */
.map{
	display:block; width:100%; height:auto;
	user-select:none; pointer-events:none;
}
.markers{ list-style:none; margin:0; padding:0; }
.marker{
	position:absolute;
	transform-origin: center;
}
.marker_overlay{
	position:absolute; inset:0; pointer-events:none; /* 컨테이너는 이벤트 차단 */
	z-index: 1;
}
.marker_overlay .markers{ list-style:none; margin:0; padding:0; }
.marker_overlay .marker{
	position:absolute;
	transform: translate(-50%, -50%);
	transform-origin: center;
	pointer-events:auto;
}
.marker > button.marker_id{
	border:0; cursor:pointer; white-space:nowrap;
	padding: 0.25rem 0.75rem; border-radius: 999rem;
	background-color: #fff;
	color: #D42087; font-weight: 700;
	display:flex; align-items:center; gap:6px;
}
.marker > button.marker_id::after{
	content: '';
	display: block;
	position: absolute; 
	bottom: -8px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 5px 0px 5px;
	border-color: #fff transparent transparent transparent;
}
.marker > button.marker_id:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.marker > button.marker_id:hover{ filter:brightness(1.05); }

/* 프로그램 */
.program{
	position: relative;
	margin: 0 auto;padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem; 
}
.program li {
	display: flex;
	margin: 0;padding: 2rem;
	gap: 2rem;
	background-color: #fff;
 }
.pg_thumb{width: 32%;overflow: hidden;}
.pg_thumb img{display: block;width: 100%; height: auto;object-fit: cover;border-radius: 0.5rem;-webkit-border-radius: 0.5rem;}
.pg_cont{
	width: calc(68% - 2rem);min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.pg_cont > .head{
	margin: 0;padding: 0;
	font-family: 'Gmarket-Medium' !important;font-size: 1.6rem;
	line-height: 1.4;
	color: #000;
}
.pg_cont > .head span {
	font-size: 1.4rem;
	color: #464646;
}
.pg_cont > p {
  margin: 0;padding: 0;
  line-height: 2rem;color: #464C53;
  word-break: keep-all;
}
.pg_cont > p .fee{
	display: inline-block;
	margin: 0;padding: 0.5rem 1rem;  
	font-size: 1.3rem; font-weight: 600;line-height: 1.4;
	color: #CD30D5;
	background-color: #FDDDFF;
	border-radius: 0.5rem;-webkit-border-radius: 0.5rem;  
}

/* 이벤트 */
.event {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2rem;
	padding: 2rem;
	background-color: #F8F8F8;
}
.event div {
	margin-bottom: 1rem;
	border: 1px solid #333;
}
/* 모달팝업 */
body.modal-open {
	overflow: hidden;
	width: 100%;
}
.modal {
	position: fixed;
	inset: 0;
	display: none;
	background: rgba(0,0,0,0.8);
	z-index: 9999;
}
.modal.is-open {
	display: flex;
	align-items: center;justify-content: center;
}
.layer_wrap{
	width: 90%;max-width: 600px;max-height: 65vh;
	display: flex;flex-direction: column;
	border-radius: 1rem;-webkit-border-radius: 1rem;
	overflow: hidden;	
}
.layer_wrap .layer_head {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	align-items: center;justify-content: center;
	padding: 1.5rem 0;
	font-size: 1.8rem;font-weight: 600;color: #fff;text-align: center;
	background-color: #14A572;
	border-radius: 1rem 1rem 0 0;-webkit-border-radius: 1rem 1rem 0 0;
}
.layer_wrap .layer_head .layer_close {
	position: absolute;top: 50%;right: 1.5rem; transform: translateY(-50%);
	width: 2.5rem;height: 2.5rem;border:0;background:none;
	display:grid; place-items:center; cursor:pointer;
}
.layer_wrap .layer_body{
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background-color:#fff;
}
.layer_wrap .layer_body img{display: block;width: 100%;height: auto; }
.layer_wrap .layer_body .layer_cont{padding: 2.5rem;}
	.layer_cont .tit {position: relative;display: inline-block;margin: 0.5rem 0;padding-left: 2rem;font-family: 'Gmarket-Medium' !important;font-size: 1.6rem; color: #0AA468;}	
	.layer_cont .tit::before {position:absolute;top: 1px;left: 0;content:'';width: 18px; height: 18px;background-image: url("/images/themepark/leaflet/icon_h4.svg");background-position: 0 0;background-repeat: no-repeat;background-size: cover;}
	.layer_cont .layer_desc {margin: 0;padding-bottom: 1.5rem;}
	.layer_cont .layer_desc p {font-size: 1.6rem;line-height: 2.5rem;color: #000;}

/* 모달안내문 */
#map_info .layer_wrap {max-width: 320px;margin: auto;}
#map_info .map_info_head {position: relative;text-align: center;}
#map_info .map_info_head p {margin: 0;padding: 1rem 0;font-size: 1.5rem;color: #fff;}
#map_info .map_info_head p img.zoom {width: 6rem;animation: zoom 2s linear infinite;}
@keyframes zoom {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-5px); }
  100% { transform: translateY(0); }
}

@media screen and (max-width:1024px) {		
	
}
@media screen and (max-width:800px) {

}
@media screen and (max-width:640px) {
	#wrap_sub .container,
	#wrap_sub .content_top {top: 6rem;}
	
	.cont_head {padding: 2.5rem 0;}
	.cont_head p strong {font-size: 1.7rem; line-height: 2.4rem;}

@media screen and (max-width:480px) {	
	body {font-size: 1.4rem;}
	
	/* title style */	
	h3.h3 {height: 2.5rem;	font-size: 1.3rem;}
	h4.h4 {padding-left: 1.85rem;font-size: 1.4rem;}
	h4.h4::before {width: 16px; height: 16px;}
	
	/* list style */
	.list1 > li {margin: 0 0 0.75rem;padding-left: 1rem;}
	.list1 > li::before{left: 0;width: 3px; height: 3px;}
	.list2 > li {margin-bottom: 0.5rem;padding-left: 1.25rem;font-size: 1.4rem;}
	
	/* tab style */
	.tab_list ul li a{min-width: 100px;padding: 0.75rem;}
	
	/* table style */
	.tblType1,
	.tblType2 {display: block;width:auto;position:relative;overflow-x: auto;white-space: nowrap;}
	
	/* 시설이용 */
	.guide .guide_img {margin-top: 2rem;border-radius: 1rem;}
	.guide .guide_mascot {width: 100px;}
	.badge {padding-left: 1.75rem;	background-size: 16px;}
	.guide_box > li {font-size: 1.3rem;}	
		
	/* 실내놀이터 */
	.floor_info {margin-top: 0;gap: 2rem;}
	.floor_info .floor_desc {width: calc(38% - 2rem);display: flex; flex-direction: column; gap: 0.5rem;}
	.floor_info .floor_desc li {padding: 0 0.25rem;gap: 0.5rem;font-size: 1.3rem;}
	.floor.is-open .floor_cont {padding: 2rem;border-radius: 0 0 0.5rem 0.5rem;-webkit-border-radius: 0 0 0.5rem 0.5rem;}
		.floor_cont .fac_list li button {font-size: 1.5rem;}
		.floor_cont .fac_list li button span {width: 2rem;height: 2rem;font-size: 1.1rem;line-height: 2rem;}
		.floor_cont .fac_marker li button.map_marker {width: 2rem; height: 2rem;font-size: 1.2rem;}
	
	/* 프로그램 */
	.pg_thumb{width: 35%;}
	.pg_cont{width: calc(65% - 2rem);gap: 0.5rem;}
	.pg_cont > p .fee{padding: 0.25rem 0.75rem;font-size: 1.2rem;}
	
	/* 모달팝업 */
	.layer_wrap .layer_head {font-size: 1.6rem;}
	.layer_wrap .layer_head .layer_close {width: 2rem;height: 2rem;}
	.layer_wrap .layer_body .layer_cont{padding: 2rem;font-size: 1.4rem;}
		.layer_cont .tit::before {top: 1px;width: 16px; height: 16px;}	
		.layer_cont .layer_desc {margin: 0;padding-bottom: 1rem;}
		.layer_cont .layer_desc p {line-height: 2rem;font-size: 1.5rem;}
	
}
@media screen and (max-width:360px) {

}
@media screen and (max-width:320px) {
	
	.cont_head p strong {font-size: 1.7rem; line-height: 2.5rem;}
}