@charset "UTF-8";

.mapWrap {position:relative;}
/*
.mapWrap::after{content:'안내문은 클릭시 닫힙니다!';display:flex;align-items:center;justify-content:center;color:#FFF;position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:1;}
.mapWrap.on::after{display:none;}
*/


.mapWrap .locationInfo { background-color:#edf1f4; padding:20px; display:flex; flex-flow:row wrap; justify-content:flex-start; align-items:stretch; }
.mapWrap .locationInfo > li { position:relative; padding:20px 0; padding-left:80px; }
.mapWrap .locationInfo > li:nth-child(n+2) { margin-left:50px; }
.mapWrap .locationInfo > li::before { content:""; position:absolute; width:60px; height:60px; border-radius:50%; left:0; top:50%; transform:translate(0, -43%); }
.mapWrap .locationInfo > li.loc::before { background:#007e77 url("/sites/style_guide/images/common/ic_location.png") no-repeat center; }
.mapWrap .locationInfo > li.tel::before { background:#007e77 url("/sites/style_guide/images/common/ic_call.png") no-repeat center; }
.mapWrap .locationInfo > li.fax::before { background:#007e77 url("/sites/style_guide/images/common/ic_fax.png") no-repeat center; }
.mapWrap .locationInfo > li.mail::before { background:#007e77 url("/sites/style_guide/images/common/ic_mail.png") no-repeat center; }
.mapWrap .locationInfo > li.home::before { background:#007e77 url("/sites/style_guide/images/common/ic_site.png") no-repeat center; }

.mapWrap .locationInfo > li > strong { font-family: 'Montserrat'; font-weight: 700; font-size: 16px; color: #333333; }
.mapWrap .locationInfo > li > p { font-family: 'Noto Light'; font-size: 16px; color: #333; letter-spacing:0.5px; }

.mapApi{border:1px solid #222;height:500px;box-sizing:border-box;}

@media only screen and (max-width:1200px){
	.mapWrap .locationInfo > li.loc { flex-basis:100%; }
	.mapWrap .locationInfo > li:nth-child(2) { margin-left:0; }
}
@media only screen and (max-width:600px){
	.mapWrap .locationInfo > li.tel { flex-basis:100%; }
	.mapWrap .locationInfo > li:nth-child(3) { margin-left:0; }
}

@media only screen and (max-width:1700px){
	.mapWrap{width:90%;margin:0 auto;}
}
@media only screen and (max-width:1024px){
	.mapApi{height:350px;}
}

.mapTab { padding-top:40px; }
.mapTab > ul { display:flex; flex-flow:row wrap; justify-content:flex-start; align-items:stretch; }
.mapTab > ul > li { margin-right:2%; margin-bottom:2%; }
.mapTab > ul > li > button { background-color:#0067c3; padding:10px 20px; color:#fff; font-size:16px; font-family:'Noto Regular'; }
.mapTab > ul > li > button:hover { background-color:#efefef; color:#000; }
.mapTab > ul > li > button.on { background-color:#efefef; color:#000; }
@media only screen and (max-width:500px) {
	.mapTab > ul > li { flex: 0 0 100%; margin-right:0; }
	.mapTab > ul > li > button { width:100%; }
}