/* 센터안내 */
.mapInfo{background: #fafafa; border: 1px solid #bbb; padding: 3rem 4rem;}
.mapInfo dl{display: flex;}
.mapInfo dl ~ dl{border-top: 1px solid #eae9e9; margin-top: 3rem; padding-top: 3rem; }
.mapInfo dl dt{flex-shrink: 0; width: 11rem; font-size: 1.3rem; font-weight: 700; color: #000;}
.mapInfo dl dd{font-size: 1rem; width: 100%;}
.mapInfo dl dd .flexWrap{display: flex; justify-content: space-between;}
.mapInfo dl dd .flexWrap .item{flex: 1;}

/* 사업안내 */
.visionWrap{display: flex; background: #f6f6f6; border-radius: 5rem; }
.visionWrap ~ .visionWrap {margin-top: 1.5rem;}
.visionWrap > span{display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 9.25rem; border-radius: 5rem; background: var(--menuColor1); color: #fff; font-weight: 700; font-size: 1.35rem;}
.visionWrap .txtWrap{padding: 1rem ;}
.visionWrap .txtWrap .tit{font-size: 1.2rem; font-weight: 700; color: #000;}
.visionWrap .txtWrap .txt{margin-top: 0.5rem;}
.visionWrap .txtWrap .txt span{margin-right: 1rem;}

.step_st1{ margin: 3rem 0; display: flex; flex-wrap: wrap;}
.step_st1 .item{margin-bottom: 2rem; width: 25%; border-left: 1px solid #cfcfcf; padding: 1.5rem;}
.step_st1 .item:nth-child(3n),
.step_st1 .item:last-child{border-right: 1px solid #cfcfcf;}
.step_st1 .item .tit{position: relative; padding-left: 2rem; font-size: 1.1rem; font-weight: 700; color: #000; margin-bottom: 1.5rem;}
.step_st1 .item .tit .num{position: absolute; left: 0; top: -0.6rem; font-size: 2.5rem; font-weight: 500; color: var(--menuColor1); line-height: 1; }
.step_st1 .item p:not(.tit){line-height: 1.5rem;}

.hLights{margin-bottom: 0.5rem; font-size: 1.1rem; font-weight: 700; color: #000; display: inline-block; background: linear-gradient(to bottom, transparent 50%, var(--mainColor) 50%); padding: 0 0.5rem;}
.hLights ~ .hLights{margin-top: 2rem;}

/* 오시는길 - 경기 */  
.map_list{border-top:2px solid #000;position:relative; background: #fff;}
.map_list li .heading{overflow:hidden;padding:10px 0 ;border-bottom:1px solid #c4ccd6;height:50px;display:table;width:100%}
.map_list li .heading p>span{float:left;position:relative;padding:0 20px;font-weight:300;display:table-cell;vertical-align:middle}
.map_list li .heading p>span:after{content:'';border-right:1px solid #c4ccd6;padding-left:20px}
.map_list li .heading p{float:left;cursor:pointer;font-weight:300;width:98%;min-height:30px;padding:5px 0}
.map_list .con_box{display:none}
.map_list .tit{position: relative;}
.map_list .tit::after { content: "\ea4d"; font-family: 'remixicon'; position: absolute; right: 1rem; top:0.3rem }
.map_list .active .tit::after { content: "\ea77";}
.map_list .con_box{ padding:20px;border-bottom:1px solid #000}
.map_list .con_box .traffic_btn,
.map_list .con_box .traffic_btn2{overflow:hidden}
.map_list .con_box .traffic_btn li{float:left;width:33%;margin-bottom:10px}
.map_list .con_box .traffic_btn2 li{float:left;width:25%;margin-bottom:10px}
.map_list .con_box .traffic_btn li a,.map_list .con_box .traffic_btn2 li a{width:95%}
.map_list .con_box  .box_white{background:#fff;padding:10px;}
@media (max-width:1024px){
    /* 사업안내 */
    .visionWrap{display: block; border-radius: 1rem;}
    .visionWrap > span{width: 100%;}
    .visionWrap .txtWrap{text-align: center;}
    .visionWrap .txtWrap .tit{font-size: 1rem;}
    .step_st1 .item{width: 50%;}
    .step_st1 .item:nth-child(3n), .step_st1 .item:last-child{border-right: 0;}
    .hLights{display: inline;}
    .hLights ~ .list_st1{margin-bottom: 2rem;}

}

@media (max-width:768px){

	/* 센터안내 */
	.mapInfo{padding: 2rem;}
    .mapInfo dl{display: block;}
    .mapInfo dl ~ dl{margin-top: 1rem; padding-top: 1rem;}
    .mapInfo dl dt{width: 100%; margin-bottom: 1rem;}

    /* 사업안내 */
    .step_st1 .item{width: 100%; border:0; padding: 1rem; margin:0;}

    /* 오시는길 */
    .map_list li .heading p{padding-right: 2rem;}
	
}
@media (max-width:420px){

	/* 센터안내 */
    .mapInfo dl dd .flexWrap{display: block;}
	
}


:root {
    --color-ver1:#76B7FF;
    --color-ver2:#13598c;
}


/*250616 서브페이지 상단 탭 추가*/
.tabWrap {width: 100%; background-color: var(--color-ver2);}
.tabWrap .tabArea {max-width: 1440px; width: 100%; margin: 0 auto; text-align: center; display: flex; flex-flow: row wrap; justify-content: center; align-items: center;  font-weight: 600; height: 100%;}
.tabWrap .tabArea .tabBoxPosition { display: flex; flex-flow: row wrap; justify-content: center; align-items: center;  font-weight: 600; height: 100%;    width: 100%;}
.tabWrap .tabArea .tabBtn {padding: 1rem 1.5rem; color: #fff; height: 100%; cursor: pointer;}
.tabWrap .tabArea .tabBtn.on {display: none;}
.tabWrap .tabArea .tabBtn span {color: #fff; font-size: 0.85rem;}
.tabWrap .tabArea .tabBtn .text {}
.tabWrap .tabArea .tabBtn .icon {display: none;}
.tabWrap .tabArea .tabBtn:hover {background-color: rgba(255,255,255,0.4);}
.tabWrap .tabArea .tabBtn.active {background-color: #fff;padding: 1rem 1.5rem 0 1.5rem;}
.tabWrap .tabArea .tabBtn.active span {color: var(--color-ver2); font-weight: 700;}
.tabWrap .tabArea .tabBtn.active .toLink {border-bottom: 2px solid var(--color-ver2); padding-bottom: 1rem; height: 100%; display: inline-block;}



@media (max-width:1440px){
    .tabWrap .tabArea {max-width: 95vw;}
}

@media (max-width:768px){
    .main-header-seoul.sub {position: static !important;}
    .tabWrap .tabArea {flex-flow: column nowrap; align-items: center; max-width: 100vw;position: relative;}
    .tabWrap .tabArea .tabBtn {font-size: 0.8rem; padding: 0.7rem; width: 100%; background-color: #fff; color: var(--color-ver2); border-bottom: 1px solid #eaeaea;}
    .tabWrap .tabArea .tabBtn:hover {background-color: #fff;}
    .tabWrap .tabArea .tabBtn .toLink {width: 100%; text-align: left;}
    .tabWrap .tabArea .tabBtn .toLink span {color: var(--color-ver2);}
    .tabWrap .tabArea .tabBtn.active { padding: 0.7rem; color: var(--color-ver2);}
    .tabWrap .tabArea .tabBtn.active .toLink { border-bottom: none; padding-bottom: 0; }
    .tabWrap .tabArea .tabBtn.on .icon {display: inline-block;}
    .tabWrap .tabArea .tabBtn.on {background-color: var(--color-ver2); color: #fff; padding: 0.7rem; flex-flow: row nowrap; width: 100%;  justify-content: space-between;  align-items: center;z-index: 92;}
    .tabWrap .tabArea .tabBtn.on .toLink { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center;}
    .tabWrap .tabArea .tabBtn.active .toLink span { border-bottom: 0; font-weight: 600;}

    .tabWrap .tabArea .tabBoxPosition {position: absolute; top: 0; background-color: #fff; z-index: 91;}
	
}