/* 센터안내 */
.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 {
    --main-green:#1ca466;
    --main-navy:#00315a;

    --color-ver1:#e3ffe3;
    --color-ver2:#9ed5a1;
    --color-ver3:#62aa62;
    --color-ver4:#348034;
    --color-ver5:#175515;
}

/*subPage top tab*/
.subpage-tabWrap {width: 100%; margin-bottom: 3rem;}
.subpage-tabWrap .sub-tabArea {display: flex; flex-flow: row nowrap; align-items: stretch; justify-content: space-between; overflow: hidden;}
.subpage-tabWrap .sub-tabArea .tab {flex: 1; font-size: 1rem; padding:0.7rem 0.5rem; background-color: #f0f0f0; text-align: center; font-weight: 500; cursor: pointer; overflow: hidden;}
.subpage-tabWrap .sub-tabArea .tab:first-child {border-radius: 0.5rem 0 0 0.5rem; overflow: hidden;}
.subpage-tabWrap .sub-tabArea .tab:last-child {border-radius: 0 0.5rem 0.5rem 0; overflow: hidden;}
.subpage-tabWrap .sub-tabArea .tab:hover {font-weight: 800;}
.subpage-tabWrap .sub-tabArea .tab.active {background-color: #fff; border: 1px solid var(--main-navy); color: var(--main-navy); font-weight: 800; box-sizing: border-box; }

/*탭마다 액티브 색상 다르게*/
.subpage-tabWrap.color .tab.active {box-shadow: none; color: #fff; border: none;}
.subpage-tabWrap.color .tab.active.color01 {background-color: #53b1ff;}
.subpage-tabWrap.color .tab.active.color02 {background-color: #008cff;}
.subpage-tabWrap.color .tab.active.color03 {background-color: #0076d6;}
.subpage-tabWrap.color .tab.active.color04 {background-color: #0058a0;}
.subpage-tabWrap.color .tab.active.color05 {background-color: #124269;}
.subpage-tabWrap.color .tab.active.color06 {background-color: #073052;}
.subpage-tabWrap.color .tab.active.color07 {background-color: #000d41;}

/*탭 컨텐츠*/
.subpage-tabWrap .sub-tabArea {}
.subpage-tabWrap .sub-tabArea .tab {cursor: pointer; }
.subpage-tabWrap .sub-tabArea .tab.active {}
.subTab-content { display: none; }
.subTab-content.active {display: flex;}

/*탭별 색상 맞춘 데코 타이틀 컬러 -> 탭 color@ 코드 맞춰 사용*/
.subpage-Tab {font-size: 14px; padding: 5px 15px; border-radius: 1rem; overflow: hidden; color: #fff; font-weight: 600; margin-right: 10px;}
.subpage-Tab.color01 {background-color: #53b1ff;}
.subpage-Tab.color02 {background-color: #008cff;}
.subpage-Tab.color03 {background-color: #0076d6;}
.subpage-Tab.color04 {background-color: #0058a0;}
.subpage-Tab.color05 {background-color: #124269;}
.subpage-Tab.color06 {background-color: #073052;}
.subpage-Tab.color07 {background-color: #000d41;}

.list_photo .item .itemLink .img {position: relative;}
.list_photo .item .itemLink .img .cate1 {position: absolute; top: 10px; left: 10px; border-radius: 1rem;  padding: 4px 10px; color: #fff; font-size: 13px; z-index: 1; font-weight: 600;}
.list_photo .item .itemLink .img .cate {position: absolute; top: 10px; left: 10px; border-radius: 1rem; background-color: var(--main-navy); padding: 4px 10px; color: #fff; font-size: 13px; z-index: 1; font-weight: 600;}

/*영상컨텐츠 페이지*/
.videoWrap {width: 100%; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: stretch; gap: 2rem; margin-bottom: 2rem;}
.videoWrap .videoBox {width: calc( ( 100% - 4rem ) / 3 ); overflow: hidden; position: relative; text-align:left; vertical-align: middle; display: flex; flex-flow: column wrap; }
.videoWrap .videoBox .imgArea {height: 300px; border-radius: 1rem; overflow: hidden; position: relative;}
.videoWrap .videoBox .imgArea img {width: 100%;object-fit: cover; display: block; object-position: center center; max-width: 100%; height: 100%;}
.videoWrap .videoBox .imgArea::after {content: '\f144';position: absolute;background-color: rgba(0,0,0,0.5);width: 100%;top: 0;height: 100%;left: 0;font-family: 'Font Awesome 5 Free';display: flex;flex-flow: column wrap;justify-content: center;align-items: center;font-size: 2rem;color: #fff;}
.videoWrap .videoBox .imgArea:hover::after {content:'바로가기 \f08e'; font-size: 0.9rem; font-weight: 600; display: inline-flex; transition: 0.2s ease-in-out;}
.videoWrap .videoBox .textArea {font-weight: 600; font-size: 0.9rem;     display: -webkit-box; -webkit-line-clamp: 1;   -webkit-box-orient: vertical;  overflow: hidden; text-overflow: ellipsis;  word-break: break-all; position: absolute; left: 10px;  top: 15px;  color: #fff; padding: 0 10px;  max-width: calc(100% - 20px); line-height: 1;}
.videoWrap .videoBox .textArea::before {content: '\f0c1'; margin-right: 5px; font-family: 'Font Awesome 5 Free'; font-size: 0.6rem; }

@media only screen and (max-width:1440px){
	.visionWrap-renew .contWrapper {padding: 0 2rem 5rem;}
	.visionWrap-renew .contWrapper .missonArea .missionBox .left {width: 100%; padding: 1.5rem;}
	.visionWrap-renew .contWrapper .missonArea .missionBox .right .title { font-size: 1.3rem; margin-bottom: 1.2rem; word-break: keep-all;}
	.visionWrap-renew .contWrapper .missonArea .missionBox .right .title br {display: none;}
	.visionWrap-renew .contWrapper .missonArea .missionBox .right .listArea .listCont .dot {line-height: 1.4;}
	.visionWrap-renew .contWrapper .missonArea .missionBox .right .listArea .listCont .list {font-size: 0.9rem;}
	
	.visionWrap-renew .contWrapper .sloganArea .title {font-size: 1.8rem;}
	.visionWrap-renew .contWrapper .sloganArea .sloganText {font-size: 1.2rem;}
}

@media only screen and (max-width: 1280px){
	.videoWrap .videoBox .imgArea {height: 250px;}
	.videoWrap .videoBox .textArea {font-size: 0.9rem;}

}

@media only screen and (max-width:1024px){
	.videoWrap {gap: 1.5rem;}
	.videoWrap .videoBox {width: calc( ( 100% - 1.5rem ) / 2 ); border-radius: 0.5rem; }
	.videoWrap .videoBox .imgArea {height: 210px; border-radius: 0.8rem;}
}

@media only screen and (max-width:550px){
	.videoWrap .videoBox {width: 100%;}
	.videoWrap .videoBox .textArea {font-size: 0.8rem;}
}