@charset 'utf-8';
/* 센터안내 */
.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:#e0f6ff;
    --color-ver2:#99cde4;
    --color-ver3:#459FC5;
    --color-ver4:#408CBC;
    --color-ver5:#174561;
}

/*2025-08-04 서브페이지 리뉴얼*/
#main-content.subpageWrap {width: 100dvw;position: relative; padding-top: 100px;}
#main-content.subpageWrap .visualWrap {width: 100%; background: url('../images/sub/subVisualBg01.jpg') right center / cover no-repeat;}
#main-content.subpageWrap .visualWrap .sloganWrap {max-width: 1440px; width: 100%; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; margin: 0 auto; padding: 1rem 0; position: relative;min-height: 210px;}
#main-content.subpageWrap .visualWrap .sloganWrap .textArea {font-size: 1.5rem; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center;}
#main-content.subpageWrap .visualWrap .sloganWrap .textArea br {display: none;}
#main-content.subpageWrap .visualWrap .sloganWrap .textArea .accent-weight {font-weight: 700;}
#main-content.subpageWrap .visualWrap .sloganWrap .textArea .normal {font-weight:500;margin-right: 5px;}
#main-content.subpageWrap .visualWrap .sloganWrap .textArea .accent-name {font-weight: 700; font-size: 2rem;}
#main-content.subpageWrap .visualWrap .sloganWrap .textArea .accent-name span {color: var(--color-ver4);}
#main-content.subpageWrap .visualWrap .sloganWrap .imgArea {position: absolute; bottom:0; right: 0;}


#main-content.subpageWrap .tabWrap {width: 100%; background-color: var(--color-ver5);}
#main-content.subpageWrap .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%;}
#main-content.subpageWrap .tabWrap .tabArea .tabBoxPosition { display: flex; flex-flow: row wrap; justify-content: center; align-items: center;  font-weight: 600; height: 100%;    width: 100%;}
#main-content.subpageWrap .tabWrap .tabArea .tabBtn {padding: 1rem 1.5rem; color: #fff; height: 100%; cursor: pointer;}
#main-content.subpageWrap .tabWrap .tabArea .tabBtn.on {display: none;}
#main-content.subpageWrap .tabWrap .tabArea .tabBtn span {color: #fff; font-size: 0.85rem;}
#main-content.subpageWrap .tabWrap .tabArea .tabBtn .text {}
#main-content.subpageWrap .tabWrap .tabArea .tabBtn .icon {display: none;}
#main-content.subpageWrap .tabWrap .tabArea .tabBtn:hover {background-color: rgba(255,255,255,0.4);}
#main-content.subpageWrap .tabWrap .tabArea .tabBtn.active {background-color: #fff;padding: 1rem 1.5rem 0 1.5rem;}
#main-content.subpageWrap .tabWrap .tabArea .tabBtn.active span {color: var(--color-ver5); font-weight: 700;}
#main-content.subpageWrap .tabWrap .tabArea .tabBtn.active .toLink {border-bottom: 2px solid var(--color-ver5); padding-bottom: 1rem; height: 100%; display: inline-block;}


#main-content.subpageWrap .nav-wrap{display: flex; justify-content: space-between; align-items: center; width: 100%; margin: 0 auto; border-bottom: 1px solid #cfcfcf; margin-top: 2.5rem; padding-bottom: 1.3rem;}
#main-content.subpageWrap .nav-wrap .tit{font-size: 1.5rem; font-weight: 700; line-height: 1;}
#main-content.subpageWrap .nav-wrap .nav{display: flex; font-weight: 500; flex-flow: row wrap;  align-items: center;  justify-content: center;  width: fit-content;}
#main-content.subpageWrap .nav-wrap .nav li ~ li::before{content: '\ea6e'; font-family: 'remixicon'; margin: 0 0.7rem;}

#main-content.subpageWrap .wrap {width: 100%; max-width: 1440px; margin: 0 auto; }
#main-content.subpageWrap .wrap .secWrap {padding-bottom: 3rem;}
#main-content.subpageWrap .wrap .secWrap .contents {line-height: 1.5; text-align: justify; word-break: break-all;}



@media only screen and (max-width: 1660px){
    #main-content.subpageWrap {padding: 0;}
}


@media only screen and (max-width: 1440px){
    #main-content.subpageWrap .tabWrap .tabArea {max-width: 95vw;}
    #main-content.subpageWrap .visualWrap .sloganWrap {max-width: 95vw;}
    #main-content.subpageWrap .wrap {max-width: 95vw;}

}


@media only screen and (max-width: 768px){
    #main-content.subpageWrap {padding-top: 0;}
    #main-content.subpageWrap .tabWrap .tabArea {flex-flow: column nowrap; align-items: center; max-width: 100vw;position: relative;}
    #main-content.subpageWrap .tabWrap .tabArea .tabBtn {font-size: 0.8rem; padding: 0.7rem; width: 100%; background-color: #fff; color: var(--color-ver5); border-bottom: 1px solid #eaeaea;         height: auto;}
    #main-content.subpageWrap .tabWrap .tabArea .tabBtn:hover {background-color: var(--color-ver1);}
    #main-content.subpageWrap .tabWrap .tabArea .tabBtn .toLink {width: 100%; text-align: left;}
    #main-content.subpageWrap .tabWrap .tabArea .tabBtn .toLink span {color: var(--color-ver5);}
    #main-content.subpageWrap .tabWrap .tabArea .tabBtn.active { padding: 0.7rem; color: var(--color-ver5);}
    #main-content.subpageWrap .tabWrap .tabArea .tabBtn.active .toLink { border-bottom: none; padding-bottom: 0; }
    #main-content.subpageWrap .tabWrap .tabArea .tabBtn.on .icon {display: inline-block;}
    #main-content.subpageWrap .tabWrap .tabArea .tabBtn.on {background-color: var(--color-ver5); color: #fff; padding: 0.7rem; flex-flow: row nowrap; width: 100%;  justify-content: space-between;  align-items: center; z-index: 1;}
    #main-content.subpageWrap .tabWrap .tabArea .tabBtn.on .toLink { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center;}
    #main-content.subpageWrap .tabWrap .tabArea .tabBtn.active .toLink span { border-bottom: 0; font-weight: 600;}
    #main-content.subpageWrap .tabWrap .tabArea .tabBoxPosition {position: absolute; top: 0; background-color: #fff; z-index: 0;}

    #main-content.subpageWrap .nav-wrap {margin-top: 1.5rem;}
    #main-content.subpageWrap .nav-wrap .tit {font-size: 1.2rem;}
    #main-content.subpageWrap .nav-wrap .nav {font-size: 0.85rem;}

    #main-content.subpageWrap .wrap .secWrap .tit1 {font-size: 1.05rem; margin: 1rem 0;        padding-left: 1.8rem;}
    #main-content.subpageWrap .wrap .secWrap .tit1::before {width: 1rem; height: 0.5rem; top: 0.3rem;}
    #main-content.subpageWrap .wrap .secWrap .tit1::after {width: 1rem;height: 0.5rem; top: 0.55rem;}

    #main-content.subpageWrap .wrap .secWrap .contents {font-size: 0.9rem; line-height: 1.4;  }

}    


@media only screen and (max-width: 550px){
    #main-content.subpageWrap .wrap .secWrap .tit1 {font-size: 1rem;}
}

@media only screen and (max-width: 375px){
    #main-content.subpageWrap .wrap .secWrap .tit1 {font-size: 1rem;}
    #main-content.subpageWrap .visualWrap .sloganWrap {justify-content: center;}
    #main-content.subpageWrap .visualWrap .sloganWrap .imgArea {display: none;}
}