@import url('sub.css'); 


.visit_content {}
.visit_content .fs68 {}



.visit_content .dots-box::after {content:''; width:233px; aspect-ratio: 3 / 3; background:url("/info/img/logo_ci.svg")no-repeat center / 100% auto; position:absolute; top:-60px; right:60px;}
.visit_content .test-info-cont {display:flex; flex-wrap:wrap; margin:50px 0 0;}
.visit_content .test-info-cont .test-info-in {flex:1; box-sizing:border-box;}
.visit_content .test-info-cont .test-info-in:last-of-type {border-left:1px dashed var(--border); padding-left:50px;}
.visit_content .test-info-cont .test-info-in .fs32 {margin:0 0 15px;}
.visit_content .test-info-cont .test-info-in .fs22 {margin:15px 0 10px; font-weight:bold; color:Var(--black);}
.visit_content .test-info-cont .test-info-in  .fs20.point1 {font-weight:bold !important; letter-spacing: var(--letter-spacing-default);}
.visit_content .test-info-cont .test-info-in .dots {}


.reservation_cont .subpage-tit {padding-bottom:50px; margin-bottom:60px; border-bottom:1px solid var(--border);}

.division-box {border-top:1px solid var(--border);}
.process_list {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap:30px;}
.process_list dl {position:relative; background:var(--white); padding:60px 60px 50px; box-sizing:border-box; display:flex; flex-wrap:wrap; gap:0 54px;}
.process_list dl::after {content:'\e941'; font-size:32px; font-family:var(--icon); color:var(--LightFont); line-height:1; position:absolute; top:50%; right:-16px; transform:translate(50%,-50%);}
.process_list dl:nth-of-type(2n)::after {display:none;}
.process_list dl dt {flex-shrink: 0; }
.process_list dl dd {flex:1;}
.process_list dl dd .fs28 {display:flex; flex-wrap:wrap; align-items:center; gap:0 11px; margin:0 0 12px;}
.info-btn {display:flex; flex-wrap:Wrap; gap:4px; margin:20px 0 0;}
.info-btn li {}
.info-btn li a {display:flex; flex-wrap:wrap; align-items:center; gap:0 11px; height:56px; border:1px solid var(--border); box-sizing:border-box; height:56px; padding:0 30px; border-radius:50px;}
.info-btn li a.tel-btn {color:var(--black); font-weight: 600;}
.info-btn li a.tel-btn b {font-family:var(--eng); font-weight: 800; font-size:1.1rem; color: var(--main);}
.info-btn li a.nav-btn {border-color:#03CF5D; color:#03CF5D;}


.layout_wrap {}
.layout_wrap .layout_cont {display:flex; flex-wrap:Wrap; border-top:1px solid var(--border); padding:60px 0; gap:20px 0; align-items:flex-start;}
.layout_wrap .layout_cont:first-of-type {padding-top:0; border-top:0;}
.layout_wrap .layout_cont .fs40 {width:420px; flex-shrink: 0; position:sticky; top:20px; transition:all 0.5s ease;}
.header.fixed + .mo_menu + #sitemap + .container .layout_wrap .layout_cont .fs40  {top:140px; transition:all 0.5s ease;}
.layout_wrap .layout_cont .layout_box {flex:1;}
.layout_wrap .layout_cont .layout_box p.fs28 {font-weight:300;}
.layout_wrap .layout_cont .layout_box h4.fs28 {margin:40px 0 15px;}
.layout_wrap .layout_cont .layout_box h4.fs28:first-of-type {margin-top:0;}
.layout_wrap .layout_cont .layout_box h4.fs28+.fs22 {margin-top:0;}
.layout_wrap .layout_cont .layout_box h4.fs28 .fs20 {display:inline-block; margin-left:8px;}
.layout_wrap .layout_cont .layout_box h4.fs22 {margin:25px 0 12px;}
.layout_wrap .layout_cont .layout_box .light-txt {color: var(--LightFont); font-size: 0.85rem; font-weight: 400; line-height: 158.824%; letter-spacing: var(--letter-spacing-caption); padding-left:15px; box-sizing:border-box; position:relative; }
.layout_wrap .layout_cont .layout_box .light-txt::before {content:'※'; font-size:inherit;color:inherit; line-height:inherit; position:absolute; top:0; left:0; }
.layout_wrap .layout_cont .layout_box .light-txt.ver2::before {color:var(--main);}
.table_style+.light-txt {margin:15px 0 0;}
.right_tit {text-align:right; margin:15px 0 0;}
.right_tit .light-txt {display:inline-block;}


.grid_content {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap:30px;}
.grayBox {padding:35px 40px; box-sizing:border-box; background:var(--grayBg);}
.grayBox .marb15 {margin:0 0 15px;}
.grayBox.flex {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px;}
.grayBox .dots .fs17 {width:100%; color:var(--LightFont); margin:2px 0 0;}
.grayBox .dots .stit {width:45px;}
.grayBox .dots .stit.auto {width:auto;}
.grayBox .light-txt {}
.grayBox .light-txt b {display:block; width:100%; color:var(--black); margin:15px 0 0; font-weight:inherit;}
.grayBox .link-btn {height:60px; background:Var(--white); padding:0 36px; border:1px solid var(--border); border-radius:50px; box-sizing:border-box; display:inline-flex; align-items:center; gap:0 7px; font-size: 0.85rem; font-weight: 600; line-height:158.824%; letter-spacing: var(--letter-spacing-caption); transition:all 0.5s ease;}
.grayBox .link-btn:hover {background:var(--grayBg); transition:all 0.5s ease;}
.grayBox .flex-box .block {display:block; color:var(--black);}
.grayBox .flex-box .fs17 {color:var(--LightFont);}

.grid_content .grayBox  {height:calc(100% - 70px);}



.proof_process {display: grid; grid-template-columns: repeat(3, 1fr); grid-gap:30px;}
.proof_process li {background:var(--grayBg); padding:70px 20px; box-sizing:border-box; text-align:center; position:relative;}
.proof_process li::after {content:'\e941'; font-size:32px; font-family:var(--icon); color:var(--LightFont); line-height:1; position:absolute; top:50%; right:0; transform:translate(50%,-50%);}
.proof_process li:last-of-type::after {display:none;}
.proof_process li .num {position:absolute; top:25px; left:25px;}
.proof_process li .icon {}
.proof_process li .fs22 {font-weight: 600; color:var(--black); margin:15px 0 0;}

.proof_process li:nth-of-type(1) .num {background:var(--sub2);}
.proof_process li:nth-of-type(2) .num {background:var(--sub3);}
.proof_process li:nth-of-type(3) .num {}

.gray-list {padding: 30px 50px; background:var(--grayBg); margin:40px 0 0;}
.gray-list li {display:flex; padding:18px 0;}
.gray-list li+li {border-top:1px dashed var(--border);}
.gray-list li b {width:160px; flex-shrink: 0; color:var(--black);}
.gray-list li .dots {font-size:inherit;}
.gray-list li .dots::before {margin-top:-3px;}

/* 오시는 길 */
	/* 지도 */
		.location_cont .mapArea_wrap {position:relative}
		.mapArea {height:580px; width:100%; border:1px solid var(--border)}
		.mapArea .map_border{display:none !important;}
		.mapArea .wrap_controllers{display:none !important;}
		.mapArea .root_daum_roughmap .cont {display:none !important}
		.mapArea .root_daum_roughmap_landing {width:100% !important; height:100%}
		.mapArea .wrap_map {height:100% !important}

	/* 지도 상단 텍스트 */
		.location_cont .mapArea_wrap .fs68 {font-weight:200; text-align:center; margin-bottom:50px}
		.location_cont .mapArea_wrap .address_tit {font-weight:300; text-align:center; margin-bottom:30px; display:flex; align-items:flex-start; justify-content:center}
		.location_cont .mapArea_wrap .address_tit::before {content:"\e0c8"; font-weight:400; font-size:32px; font-family:var(--icon);}

	/* 지도 링크 */
		.location_cont .mapArea_wrap .btn_list {display:flex; gap:2px; position:absolute; left:50%; bottom:25px; transform:translateX(-50%); z-index:999}
		.location_cont .mapArea_wrap .btn_list a {width:176px; aspect-ratio: 176 / 59; border-radius:9999px; display:flex; align-items:center; justify-content:center; gap:10px; font-weight:600; border:1px solid transparent; box-sizing:border-box; transition:all 0.3s linear}
		.location_cont .mapArea_wrap .btn_list a.naver {background:#10D265; color:var(--white);}
		.location_cont .mapArea_wrap .btn_list a.kakao {background:#FEDD0D; color:var(--black);}
		
		.location_cont .mapArea_wrap .btn_list a svg path {transition:all 0.3s linear}
		.location_cont .mapArea_wrap .btn_list a.naver:hover {background:var(--white); color:#10D265; border-color:#10D265}
		.location_cont .mapArea_wrap .btn_list a.naver:hover svg path {fill:#10D265}
		.location_cont .mapArea_wrap .btn_list a.kakao:hover {background:var(--white); color:var(--black); border-color:#FEDD0D}

	/* 교통편 정보 */
		.location_info h4 {text-align:center; font-weight:700; margin-bottom:40px}
		.location_info .location_info_list {display:grid; grid-template-columns:repeat(3, 1fr); grid-gap:30px;}
		.location_info .location_info_list > li {background:Var(--white); padding:50px; position:relative; display:flex; flex-direction:column}
		.location_info .location_info_list > li .tbox {flex:1}
		.location_info .location_info_list > li i {display:flex; justify-content:flex-end; margin-top:-94px}
		.location_info .location_info_list > li h5.fs32 {margin-bottom:20px}

		.location_info .location_info_list > li .buslist_tit {font-weight:600; color:var(--black); margin-bottom:8px}
		.location_info .location_info_list > li .buslist li + li {margin-top:25px}
		.location_info .location_info_list > li .buslist dl {display:flex; gap:7px; align-items:flex-start; flex-wrap:wrap}
		.location_info .location_info_list > li .buslist dl + dl {margin-top:6px}
		.location_info .location_info_list > li .buslist dt {display:flex; margin-top:5px; flex-shrink:0}
		.location_info .location_info_list > li .buslist dd {text-wrap:balance}

		.location_info .location_info_list > li .park_txt {display:flex; align-items:flex-start; gap:9px}
		.location_info .location_info_list > li .park_txt::before {width:3px; aspect-ratio: 1 / 1; margin-top:13px; background:var(--main); content:""; flex-shrink:0}
	
	


/*******************************************************************************
	@media ~1500px
*******************************************************************************/
@media all and (max-width:1500px) { 
.visit_content .dots-box::after {max-width:22%; top:-20%; right:5%;}
/* 오시는 길 */
	/* 교통편 정보 */
		.location_info .location_info_list > li {padding:35px;}
		.location_info .location_info_list > li i {margin-top:-87px}
		.location_info .location_info_list > li i img {width:90px; height:auto}
}
/*******************************************************************************
	@media ~1300px
*******************************************************************************/
@media all and (max-width:1300px) { 

.process_list dl {padding:40px; gap:0 30px;}
.process_list dl dt img {max-width:60px;}

.grid_content {display:block;}
.grid_content .grayBox {height:auto;}

.layout_wrap .layout_cont {padding:40px 0;}
.layout_wrap .layout_cont .fs40 {width:250px;}



/* 오시는 길 */
	/* 지도 */
		.mapArea {height:500px;}

	/* 지도 상단 텍스트 */
		.location_cont .mapArea_wrap .fs68 {margin-bottom:40px; font-size:2.7rem}

	/* 교통편 정보 */
		.location_info h4 {margin-bottom:30px}
		.location_info .location_info_list {grid-gap:15px;}
		.location_info .location_info_list > li {padding:25px;}
		.location_info .location_info_list > li i {margin-top:-77px}
		.location_info .location_info_list > li i img {width:80px}
		.location_info .location_info_list > li h5.fs32 {margin-bottom:15px}

		.location_info .location_info_list > li .buslist li + li {margin-top:20px}
		.location_info .location_info_list > li .buslist dl {gap:5px;}
		.location_info .location_info_list > li .buslist dd {font-size:0.9rem}
		.location_info .location_info_list > li .buslist li:last-child {padding-right:80px}
	

}
/*******************************************************************************
	@media 769~980px
*******************************************************************************/
@media all and (max-width:980px) { 


.reservation_cont .subpage-tit {margin-bottom:30px;}

.process_list dl {display:block; padding:30px;}
.process_list dl br {display:none;}
.process_list dl dt {width:100%; line-height:1; margin:0 0 30px; text-align:right;}
.process_list dl dd {width:100%; flex:none;}
.info-btn li {width:100%;}
.info-btn li a {width:100%; justify-content:center; height:50px; padding:0 20px;}



.grayBox {padding:25px 30px;}
.grayBox .link-btn {height:52px; padding:0 30px;}

.gray-list {padding:20px 30px;}
.gray-list li {padding:14px 0;}
.gray-list li b {width:115px;}

.proof_process li img {max-width:60px;}



/* 오시는 길 */
	/* 지도 */
		.mapArea {height:350px;}

	/* 지도 상단 텍스트 */
		.location_cont .mapArea_wrap .fs68 {margin-bottom:30px; font-size:2.7rem}	
/* 		.location_cont .mapArea_wrap .address_tit {margin-bottom:10px} */
		.location_cont .mapArea_wrap .address_tit::before {font-size:26px}
		.location_cont .mapArea_wrap .btn_list a {width:140px; gap:6px}
		.location_cont .mapArea_wrap .btn_list a.naver svg {Width:13px; height:auto}
		.location_cont .mapArea_wrap .btn_list a.kakao svg {Width:auto; height:16px}

	/* 교통편 정보 */
		.location_info h4 {margin-bottom:20px}
		.location_info .location_info_list {grid-template-columns:repeat(1, 1fr); grid-gap:10px;}
		.location_info .location_info_list > li {padding:20px;}
		.location_info .location_info_list > li i {margin-top:-67px}
		.location_info .location_info_list > li i img {width:70px}

		.location_info .location_info_list > li .buslist li + li {margin-top:15px}
		.location_info .location_info_list > li .buslist li:last-child {padding-right:70px}
		.location_info .location_info_list > li .buslist dt {margin-top:2px}
		.location_info .location_info_list > li .park_txt {gap:6px}
		.location_info .location_info_list > li .park_txt::before {margin-top:11px}

}
/*******************************************************************************
	@media 481~680px
*******************************************************************************/
@media all and (max-width:680px) { 


.visit_content .dots-box::after {max-width:50px; top:-20%; right:5%;}

.visit_content .test-info-cont {margin:30px 0 0;}
.visit_content .test-info-cont .test-info-in {flex:none; width:100%;}
.visit_content .test-info-cont .test-info-in:last-of-type {padding-left:0; padding-top:30px; margin-top:30px; border-left:0; border-top:1px dashed var(--border);}
.visit_content .test-info-cont .test-info-in .fs32 {margin:0 0 10px;}

.reservation_cont .subpage-tit {padding-bottom:30px; margin-bottom:20px;}

.process_list {display: grid; grid-template-columns: repeat(1, 1fr); grid-gap:26px;}
.process_list dl {padding:20px;}
.process_list dl dt {position:absolute; top:10px; right:20px;}
.process_list dl dt img {max-width:32px;}
.process_list dl dd .fs28 {gap:0 6px;}
.info-btn li a {height:40px; gap:0 8px;}
.info-btn li a img {max-width:12px;}
.process_list dl::after {display:block !important; font-size:26px; right:50%; top:auto; bottom:0; transform:rotate(90deg) translate(50%,0); transform-origin: bottom center;}
.process_list dl:last-of-type::after {display:none !important;}


.layout_wrap .layout_cont {padding:20px 0; gap:15px 0;}
.layout_wrap .layout_cont .fs40 {width:100%; margin:0 0 0; position:relative !important; top:0 !important;}
.layout_wrap .layout_cont .layout_box {flex:none; width:100%;}
.layout_wrap .layout_cont .layout_box h4.fs28 {margin:20px 0 10px;}

.grayBox {padding:15px;}
.grayBox .link-btn {height:44px; padding:0 18px; width:100%; justify-content:center; line-height:1;}
.grayBox .link-btn img {max-height:16px;}

.gray-list {padding:5px 15px; margin:20px 0 0;}
.gray-list li {display:block;}
.gray-list li b {display:block; width:100%; margin:0 0 2px;}
.gray-list li .dots::before {margin-top:-1px;}


.proof_process {grid-template-columns: repeat(1, 1fr); grid-gap:26px; }
.proof_process li {padding:30px;}
.proof_process li .num {top:15px; left:15px;}
.proof_process li::after {font-size:26px; right:50%; top:auto; bottom:0; transform:rotate(90deg) translate(50%,0); transform-origin: bottom center;}


/* 오시는 길 */
	/* 지도 */
		.mapArea {height:280px;}

	/* 지도 상단 텍스트 */
		.location_cont .mapArea_wrap .fs68 {margin-bottom:15px; font-size:2rem}	
		.location_cont .mapArea_wrap .address_tit	 {margin-bottom:20px;}
		.location_cont .mapArea_wrap .address_tit::before {font-size:20px}
		.location_cont .mapArea_wrap .btn_list {position:static; transform:none; margin-top:15px}
		.location_cont .mapArea_wrap .btn_list a {width:50%; aspect-ratio:unset; padding:10px 0}

	/* 교통편 정보 */
		.location_info .location_info_list > li br {display:none}
		.location_info .location_info_list > li h5.fs32 {margin-bottom:10px}
		.location_info .location_info_list > li .buslist dt {margin-top:1px}
		.location_info .location_info_list > li .buslist dt img {width: 15px; height:auto}
		.location_info .location_info_list > li .park_txt::before {margin-top:9px}
		.location_info .location_info_list > li .buslist li:last-child {padding-right:65px}
		.location_info .location_info_list > li i img {width:45px}
		.location_info .location_info_list > li i {margin-top:-45px}
		.location_info .location_info_list > li .buslist_tit {margin-bottom:6px}
		.location_info .location_info_list > li .buslist li + li {margin-top:12px}
		.location_info .location_info_list > li:not(:nth-child(2)) .tbox {padding-right:65px}

}