@charset "utf-8";
ul {list-style:none; margin:0; padding:0;}

.map {}
.map h3 {text-align:center; font-size:var(--fs32); line-height:1.3; color:#000; font-weight:700;}
.map h3 span {font-weight:400;}

.map .mapWrap {display:grid; align-items: center; grid-template-columns:42.5vw auto; gap:100px; margin:70px 0;}
.map .mapScript {color: #000; }
.map .mapScript p {font-size: var(--fs23); font-weight: 700; margin-bottom:25px;}
.map .mapScript p span {color: var(--base2); font-size: 23px;}

.map .mapScript .fastMap {display:flex; align-items: center; gap:15px; margin:25px 0;}
.map .mapScript .fastMap .fastMore {display:grid; grid-template-columns:repeat(3,1fr); gap:15px;}
.map .mapScript .fastMap .fastMore a {display:flex; flex-direction: column; align-items: center; gap:5px; font-size: var(--fs15);}
.map .mapScript .fastMap .fastMore .imgWrap {border-radius:10px; background:#fff; border:1px solid #ddd; max-width:120px; height:80px; display:flex; gap:0;}

.map .mapScript .fastMap .fastMore .kakaomap .imgWrap {background:#fae100; border:1px solid #fae100;}
.map .mapScript .fastMap .fastMore .googlemap .imgWrap {padding:10px;}

.map .parkinMore a {padding:0 150px 0 50px; color:#fff; font-weight:600; font-size:var(--fs18); line-height:44px; border-radius:100px; background:var(--base4); position:relative; display:inline-block; transition: all .5s ease-in-out;}
.map .parkinMore a .arrow {display:inline-block; position:absolute; left:62%; top:50%; transform:translateY(-50%); width:15%; height:2px; background:#fff; border-radius:3px;margin-right:2em;transition:all .5s ease-in-out;}
.map .parkinMore a .arrow:after {content: ''; position:absolute; left:84%; top:42%; display:block; transform:translateY(-50%); display:block; background: url(/images/common/arrow_right.svg) no-repeat 0 0;width:100%; height:1em; background-size: contain;transition:all .5s ease-in-out;}
.map .parkinMore a:hover .arrow {width:30%;}
.map .parkinMore a:hover .arrow:after {left:91%;}
.map .parkinMore a::before {width:18px; height:18px; background:url(/images/reservation/i-check.svg)50% no-repeat; left:27px; top:50%; position:absolute; display:block; content:''; transform:translateY(-50%);}


/* 탭메뉴 */
.map .mapTab .map-item h3 {font-size:var(--fs25); margin-bottom:30px;}
.map .mapTab .map-item p {font-size:var(--fs20); text-align:center; margin-bottom:30px; margin-top:-20px;}
.map .mapTab .map-item .imgWrap {max-width:1200px; max-height:550px; margin:0 auto; text-align:center; border-radius:20px; border:1px solid #ddd; overflow:hidden;}
.map .mapTab .map-item .imgWrap img {width:100%; object-fit:cover;}

.map .mapTab .map-item .busInfoWrap {display:grid; grid-template-columns:auto auto; height:770px; border-radius:20px; border:1px solid #ddd; overflow:hidden;}
.map .mapTab .map-item .busInfoWrap .imgWrap img {height:100%; }
.map .mapTab .map-item .busInfoWrap .busInfo ul {width:100%; height:50%; background:var(--base1); color:#fff; padding:0 70px; display: flex; flex-direction: column; justify-content: center;}
.map .mapTab .map-item .busInfoWrap .busInfo ul h3 {color:#fff; margin-bottom:20px; text-align:left;}
.map .mapTab .map-item .busInfoWrap .busInfo ul span {display:inline-block; padding:5px 0; width:65px; background:#fff; border-radius:100px; color:var(--base1); text-align:center; font-size:var(--fs15); font-weight:600; margin:0 10px 5px 0;}

.map .mapTab .map-item .busInfoWrap .busInfo ul.second { background:#fff; color:#000;}
.map .mapTab .map-item .busInfoWrap .busInfo ul.second h3 { color:#000;}
.map .mapTab .map-item .busInfoWrap .busInfo ul.second span {background:var(--base1); color:#fff;}

.map .mapTab .map-item .busInfoWrap .busInfo ul .black {color:#3C3C3C;}
.map .mapTab .map-item .busInfoWrap .busInfo ul .green {color:#8FC31F;}
.map .mapTab .map-item .busInfoWrap .busInfo ul .lightgreen {color:#36A5A5;}

.map .mapTab .map-item .busInfoWrap .busInfo ul.second .black_bg {background:#3C3C3C; color:#fff;}
.map .mapTab .map-item .busInfoWrap .busInfo ul.second .green_bg {background:#8FC31F; color:#fff;}
.map .mapTab .map-item .busInfoWrap .busInfo ul.second .lightgreen_bg {background:#36A5A5; color:#fff;}


/* 진료안내 */
.map .mapInfo {position:relative; border-radius: 40px; border: 5px solid #FFF; background: #F9F9F9; box-shadow: 12px 9px 40px 0 rgba(0, 0, 0, 0.10); padding:70px; display:flex; gap:100px; margin-top:140px;}
.map .mapInfo h4 {display:flex; gap:15px; align-items: flex-start; color: #000; font-size: var(--fs33); font-weight: 700; line-height: 1;}
.map .mapInfo dl dt.mapinfoCall {display:flex; gap:15px; align-items: center; line-height: 1; color: #203572; font-size: var(--fs30); font-weight: 700; margin-bottom:20px;}
.map .mapInfo dl dd span {display:inline-block; background:#fff; padding:12px 40px; text-align:center; font-weight: 600; font-size: var(--fs15); color:#000; text-align: justify; border-radius:100px; margin:0 15px 8px 0; width:130px;}
.map .mapInfo dl dd {font-size: var(--fs17); color:#000; font-weight: 400;}
.map .mapInfo dl dd i {color: #FF3838; font-style: normal; display:flex; gap:10px; align-items: flex-start;}
.map .mapInfo dl dd i img {margin-top:5px;}

.map .mapInfo .imgWrap {position:absolute; right:-10px; bottom:-10px; border-radius:40px; border:5px solid #F9F9F9; overflow: hidden; height:540px;}
.map .mapInfo .imgWrap img {object-fit: cover; width: 100%;}


/* ************************ 태블릿 이하(~1199) ************************ */
@media (max-width: 1450px) {
	.map .mapInfo .imgWrap {position:static;}
	.map .mapInfo {flex-direction: column; gap: 30px; margin:80px 50px 0 50px;}
}

/* ************************ 태블릿 이하(~1199) ************************ */
@media (max-width: 1199px) {
	
	.map .mapWrap {grid-template-columns:auto; gap:30px; margin-top:30px;}
	.map .mapInfo {margin:40px 0 0 0;}
	.map .mapTab .map-item .busInfoWrap {  grid-template-columns: auto; height: auto;}
	.map .mapTab .map-item .busInfoWrap .busInfo ul {padding:70px;}
}


/* ************************ 모바일 ************************ */
@media (max-width: 767px) {
	
	.map .mapInfo {padding:0px; border-radius:0; box-shadow:none; border-radius:0; background:#fff;}
	.map .mapInfo dl dd span {background:#eee; margin:0;}
	.map .mapInfo .imgWrap {height:auto;}
	.map .mapInfo dl dt.mapinfoCall img {border: 2px solid #ddd; border-radius: 20px;}
	
	.map .mapScript .fastMap {flex-direction: column; gap:5px; align-items: flex-start;}
	.map .mapTab .map-item .busInfoWrap .busInfo ul {padding:30px;}
	
	.map .parkinMore a {padding:0 50px; width: 100%;}
	.map .parkinMore a .arrow {left:70%;}
	
	.map .mapInfo dl dd {display: flex; flex-direction: row; align-items: center; gap:15px;}
	.map .mapInfo dl dd+dd {margin-top:10px;}
	
	.map .mapInfo h4 {font-size: var(--fs25);}
	.map .mapInfo h4 img {width:24px;}
	.map .mapInfo .imgWrap {border-radius:20px;}
	.map .mapInfo dl dt.mapinfoCall {gap:15px; margin-bottom:20px;}
	
}