@charset "utf-8";


/* 공통영역 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* 이미지박스 */
.imgbox {position:relative; width:100%; text-align:center; padding:3rem; border-radius:1rem; border:1px solid #ddd; background:var(--white); overflow:hidden;}
.imgbox.nobox {padding:0; border:none;} /* 박스가 필요없는 경우 */
.imgbox div {position:relative;}
.imgbox div ~ div {margin-top:6rem;}

.imgbox .expand {display:none;} /* 이미지확대-모바일용 */

@media screen and (max-width: 769px){
	.imgbox {padding:1.5rem;}
	.imgbox div ~ div {margin-top:3rem;}
	.imgbox img {width:100% !important;}
	
	.imgbox .expand {
		position:absolute; left:1rem; top:1rem; width:4rem; height:4rem; display:flex; justify-content:center; align-items:center; 
		text-align:center; border-radius:1rem; background:rgba(34,63,99,0.2); cursor:pointer;
	}
	.imgbox .expand:hover {background:rgba(34,63,99,0.6);}
	.imgbox .expand i {font-size:1.4rem; color:var(--white);}
}


/* 소개 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* 소개>시스템 소개 */
.system_intro {display:flex; flex-direction:column; gap:6rem;}

.intro_head {
	position:relative; display:flex; flex-direction:column; gap:1.6rem; font-family:var(--fontPre); font-weight:500; padding:8rem; 
	border-radius:1rem; background:url(../images/content/intro_head.jpg) center right no-repeat, #eff4fc; background-size:90%; overflow:hidden;
}
.intro_head * {position:relative; z-index:2;}
.intro_head h3 {font-size:4.2rem; line-height:1.4; color:var(--black);}
.intro_head h3 strong {display:block; font-weight:700; color:var(--maincolor1);}
.intro_head p {font-size:1.8rem; letter-spacing:0.02em; color:var(--gray); opacity:0.8;}

.intro_cont {padding:0 5rem;}
.intro_cont h4 {font-family:var(--fontPre); font-size:2.8rem; font-weight:500; color:var(--black); margin-bottom:4rem;}
.intro_cont h4 b {color:var(--maincolor1);}
.intro_cont p {font-size:1.7rem; line-height:1.8; color:var(--fontcolor2);}
.intro_cont p ~ p {margin-top:2rem;}

.intro_service {display:flex; justify-content:space-between; align-items:center; gap:3rem 12rem; margin:6rem 0 4rem;}
.intro_service strong {font-family:var(--fontPre); font-size:2.8rem; font-weight:700;}
.intro_service ul {flex:1; display:grid; grid-template-columns:repeat(4, 1fr); gap:1.6rem;}
.intro_service ul li {
	display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4px; font-size:1.6rem; 
	text-align:center; padding:2.4rem 1.6rem; border-radius:8px; border:2px solid #ddd; background:var(--white);
}
.intro_service ul li em {font-family:var(--fontPre); font-size:2rem; font-weight:700; color:var(--maincolor1);}
.intro_service ul li p {font-size:1.6rem; line-height:1.4; color:var(--fontcolor1);}

.btn_move {display:flex; justify-content:center; align-items:center; text-align:center; padding:0 5rem; margin-bottom:4rem;}
.btn_move button {
	width:32rem; height:5.6rem; display:flex; justify-content:space-between; align-items:center; gap:2rem; 
	font-size:1.6rem; font-weight:500; color:var(--white);
	padding:1rem 2rem 1rem 2.8rem; border-radius:50em; background:linear-gradient(210deg, var(--maincolor1), var(--subcolor2));
}
.btn_move button:hover {transform:translateY(-3px); box-shadow:0 0 10px rgba(0,0,0,0.15);}
.btn_move button i {font-size:2rem; color:var(--white); opacity:0.6;}

@media screen and (max-width: 1200px){
	.intro_head {padding:8rem 6rem;}
	
	.intro_cont {padding:0 3rem;}
	.btn_move {padding:0 3rem;}
}
@media screen and (max-width: 1025px){
	.system_intro {gap:5rem;}
	.intro_head {padding:6rem; background:#eff4fc;}
	
	.intro_service {flex-direction:column; margin:5rem 0 4rem;}
	.intro_service ul {width:100%;}
}
@media screen and (max-width: 769px){
	.intro_head {gap:1.2rem; padding:4rem;}
	.intro_head h3 {font-size:2.8rem;}
	.intro_head p {font-size:1.5rem;}
	
	.intro_cont {padding:0 2rem;}
	.intro_cont h4 {font-size:2.2rem;}
	.intro_cont h4 br {display:none;}
	.intro_cont p {font-size:1.6rem;}
	
	.intro_service ul {grid-template-columns:repeat(2, 1fr);}
	.intro_service strong {font-size:2.2rem;}
	.btn_move {padding:0 2rem;}
}
@media screen and (max-width: 481px){
}

/* 오시는 길 */
.location_way {display:flex; flex-direction:column; gap:6rem;}

.location_map {position:relative; width:100%; padding:1rem; border-radius:2rem; background:var(--white); overflow:hidden; box-shadow:0 0 10px rgba(0,0,0,0.12);}

.root_daum_roughmap {width:100% !important; border-radius:1.6rem;} /* 지도 */
.root_daum_roughmap .wrap_map {width:100% !important; height:600px !important; border-radius:1.6rem 1.6rem 0 0;}
.root_daum_roughmap .cont {display:none;}
.root_daum_roughmap .wrap_controllers {padding:12px 20px !important; border-radius:0 0 1.6rem 1.6rem !important;}

.location_info {display:flex; flex-direction:column; gap:4rem;}
.location_info h4 {font-size:2.8rem; font-weight:600; color:var(--fontcolor1);}
.location_info div {display:flex; flex-direction:column; gap:2.4rem;}
.location_info div dl {display:grid; grid-template-columns:16rem 1fr; gap:2rem 4rem; align-items:center;}
.location_info div dl dt {display:flex; align-items:center; gap:2rem; font-size:1.8rem; font-weight:500; color:var(--fontcolor1);}
.location_info div dl dt span {flex:none; width:4rem; height:4rem; display:flex; justify-content:center; align-items:center; text-align:center; border-radius:50%; background:var(--subcolor3);}
.location_info div dl dt span i {font-size:2rem; color:var(--maincolor1);}
.location_info div dl dd {font-size:1.8rem; color:var(--fontcolor2);}

@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1025px){
}
@media screen and (max-width: 769px){
	.location_info h4 {font-size:2.4rem;}
	.location_info div dl {grid-template-columns:12rem 1fr;}
}
@media screen and (max-width: 481px){
	.location_info div {gap:3.6rem;}
	.location_info div dl {grid-template-columns:1fr;}
}

/* 장비예약 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* 장비예약>예약 안내 */
.equip_reservation {display:flex; flex-direction:column; gap:4rem;}

.reservation_intro {display:flex; flex-direction:column; gap:8px; padding:3rem 4rem; border-radius:8px; background:var(--subcolor3);}
.reservation_intro h3 {font-size:2.2rem; font-weight:bold; color:var(--maincolor2);}
.reservation_intro p {font-size:1.6rem; color:var(--fontcolor2);}

.reservation_order {display:flex; flex-direction:column; gap:4rem;}
.order_box {display:flex; flex-direction:column; gap:2rem;}
.order_box .order_title {display:flex; align-items:center; gap:1.2rem; font-size:2rem; font-weight:bold; color:var(--fontcolor1);}
.order_box .order_title span {
	width:3.2rem; height:3.2rem; display:flex; justify-content:center; align-items:center; 
	font-family:var(--fontPre); font-size:1.6rem; font-weight:700; color:var(--white); text-align:center; 
	border-radius:50%; background:var(--maincolor4);
}
.order_box .order_comment {font-size:1.6rem; color:var(--fontcolor1);} 
.order_box .order_desc {color:var(--fontcolor2);}
.order_box .order_desc b {color:var(--fontcolor1);}
.order_box .order_desc .example {line-height:1.8; margin-top:8px;}
.order_box .bbs_list_view .mob_title {width:12rem;}