@charset 'utf-8';
@import url("./Paperlogy.css");
@import url("./pretendardvariable.css");
/* 센터안내 */
.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;
    --menuColor1: #6991ff;
    --menuColor2: #9db7ff;
    --mainColor: #f3f8ff;
    --subColor1: #14478f;
    --subColor2: #608aff;
    --subColor3: #d5e6ff;
    --project-color1:#0176FC;
    --project-color2:#2BB26B;
    --project-color3:#14BF9D;
    --project-color4:#7038BE;
}


/*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;}

/*251125 서브페이지 프로젝트*/
.show_1024 {display: none;}
br.block {display: block !important; font-size: 0.8rem; line-height: 0.8;}
.p-titleWrap {width: 100%; padding: 3rem 1rem 2rem; border-radius: 1rem; font-family: 'Paperlogy'; position: relative;  text-align: center; background: url('../images/sub/projectBg01.jpg') right bottom / cover no-repeat; margin-top: 5rem}
.p-titleWrap.bg02 {background-image: url('../images/sub/projectBg02.jpg') ;}
.p-titleWrap.bg03 {background-image: url('../images/sub/projectBg03.jpg') ;}
.p-titleWrap.bg04 {background-image: url('../images/sub/projectBg04.jpg') ;}
.p-titleWrap .num {font-size: 1.1rem; padding: 0.5rem 2rem; border-radius: 2rem; background: linear-gradient(-90deg,#0074FF, #28BF95); font-weight: 600; color: #fff; position: absolute; top: 0; right: 50%; transform: translate(50%, -50%);}
.p-titleWrap .title {color: #003E6C; position: relative; margin-bottom: 2rem; word-break: keep-all;}
.p-titleWrap .title::after {content: ''; width: 2rem; height: 1px; background-color: #8d8d8d; display: inline-block; position: absolute; bottom: -1rem; right: 50%; transform: translate(50%, -50%);}
.p-titleWrap .textArea {font-family: 'pretendard'; font-size: 1rem; color:#4E4E4E; text-align: center; font-weight: 500; }

.nowWrap {counter-reset: diagram; width: 100%; display: flex; flex-flow: row wrap; align-items: stretch; justify-content: space-between; gap: 1rem;}
.nowWrap.odd {justify-content: center;}
.nowWrap .nowBox {background-color: #f5f5f5; padding: 1.5rem; border-radius: 1rem; display: flex; flex-flow: column wrap; align-items: center; justify-content: flex-start; gap: 0.5rem; flex: 1;}
.nowWrap .nowBox .num {counter-increment: diagram; font-size: 0.9rem; aspect-ratio: 1; border-radius: 50%; color: #fff; font-family: 'Paperlogy'; font-weight: 600; background-color: var(--project-color1); padding: 0.5rem;}
.nowWrap.no2 .nowBox .num {background-color: var(--project-color2);}
.nowWrap.no3 .nowBox .num {background-color: var(--project-color3);}
.nowWrap.no4 .nowBox .num {background-color: var(--project-color4);}
.nowWrap .nowBox .num::before {content: counter(diagram, decimal-leading-zero);}
.nowWrap .nowBox .nowTitle {color: var(--project-color1); text-align: center; position: relative; margin-bottom: 1.5rem; word-break: keep-all;}
.nowWrap.no2 .nowBox .nowTitle {color: var(--project-color2);}
.nowWrap.no3 .nowBox .nowTitle {color: var(--project-color3);}
.nowWrap.no4 .nowBox .nowTitle {color: var(--project-color4);}
.nowWrap .nowBox .nowTitle::after {content: ''; display: inline-block; width: 1px; height: 1rem; position: absolute; right: 50%; bottom: -1rem; transform: translate(-50%, 50%); background-color: #3C3C3C;;}
.nowWrap .nowBox .textArea {line-height: 1.5; font-size: 1rem; text-align: center; font-weight: 500; color: #3C3C3C;}

.proWrap {width: 100%; display: flex; flex-flow: row wrap; align-items: stretch; justify-content: space-between; gap: 2rem;}
.proWrap.double .proBox{width: calc( ( 100% - 2rem ) / 2 );}
.proWrap.triple {gap: 1rem; justify-content: center;}
.proWrap.triple .proBox{width: calc( ( 100% - 2rem ) / 3 );}
.proWrap .proBox {background-color:#EFF9FF; border-radius: 1rem; padding: 1.5rem;}
.proWrap.no2 .proBox {background-color: #F2FAF6;}
.proWrap.no3 .proBox {background-color: #E8F9F6;}
.proWrap.no4 .proBox {background-color: #F7F2FF;}
.proWrap .proBox .imgArea {width: 100%; text-align: center;margin-bottom: 1rem;}
.proWrap .proBox .imgArea img {max-height: 240px; }
.proWrap .proBox .titleArea {display: flex; flex-flow: row wrap; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 2rem;}
.proWrap .proBox .titleArea .num {padding: 0.3rem 1rem; color: #fff; background: linear-gradient(125deg, #2c8eff,#014795 ); font-family: 'Paperlogy'; font-weight: 600; border-radius: 2rem;}
.proWrap.no2 .proBox .titleArea .num {background: linear-gradient(125deg,#2BB26B,#124C2E );}
.proWrap.no3 .proBox .titleArea .num {background: linear-gradient(125deg,#14BF9D,#095949 );}
.proWrap.no4 .proBox .titleArea .num {background: linear-gradient(125deg,#7038BE,#341A58);}
.proWrap .proBox .titleArea .title {color: var(--project-color1); word-break: keep-all;}
.proWrap.no2 .proBox .titleArea .title {color: var(--project-color2);}
.proWrap.no3 .proBox .titleArea .title {color: var(--project-color3);}
.proWrap.no4 .proBox .titleArea .title {color: var(--project-color4);}
.proWrap .proBox .listArea {width: 100%;}
.proWrap .proBox .listArea .list {margin-bottom: 0.7rem; display: flex; flex-flow: row wrap; align-items: flex-start; justify-content: flex-start; gap: 5px; }
.proWrap .proBox .listArea .list:last-child {margin-bottom: 0;}
.proWrap .proBox .listArea .list .dot {width: 8px; aspect-ratio: 1; border-radius: 50%; background-color: var(--project-color1);}
.proWrap.no2 .proBox .listArea .list .dot {background-color: var(--project-color2);}
.proWrap.no3 .proBox .listArea .list .dot {background-color: var(--project-color3);}
.proWrap.no4 .proBox .listArea .list .dot {background-color: var(--project-color4);}
.proWrap .proBox .listArea .list .textArea {font-weight: 700; color: #3c3c3c; font-size: 1rem; flex: 1;}
.proWrap .proBox .listArea .list .textArea .normal {font-weight: 500;}

.goalWrap {width: 100%; display: flex; flex-flow: row wrap; align-items: stretch; justify-content: space-between; gap: 1rem; margin-top: 1.5rem;}
.goalWrap .goalBox {flex: 1; position: relative; padding: 1.5rem 1rem 1rem; border-top: 1px solid #00316d;; border-bottom: 1px solid #00316d; display: flex; flex-flow: column wrap;  align-items: flex-start;   justify-content: space-between;}
.goalWrap.no2 .goalBox {border-color: #006d34;}
.goalWrap.no3 .goalBox {}
.goalWrap.no4 .goalBox {}
.goalWrap .goalBox .num {font-size: 0.9rem; font-family: 'Paperlogy'; padding: 0.1rem 1rem; border-radius: 2rem; background-color:#00316d; font-weight: 600; color: #fff; position: absolute; top: 0; left: 1rem;  transform: translate(0%, -50%);}
.goalWrap.no2 .goalBox .num {background-color:#006d34;}
.goalWrap.no3 .goalBox .num {background-color:#117c65;}
.goalWrap.no4 .goalBox .num {background-color:#341A58;}
.goalWrap .goalBox .titleArea .normal {font-size: 1rem; color: #5C5C5C; font-weight: 500;}
.goalWrap .goalBox .titleArea .accent {font-size: 1.3rem; color:#00316d; font-weight: 700;}
.goalWrap.no2 .goalBox .titleArea .accent {color:#006d34; }
.goalWrap.no3 .goalBox .titleArea .accent {color:#117c65; }
.goalWrap.no4 .goalBox .titleArea .accent {color:#341A58; }
.goalWrap .goalBox .imgArea { text-align: right; width: 100%;}
.goalWrap .goalBox .imgArea .decoBox {aspect-ratio: 1;  border-radius: 0.5rem; background: linear-gradient(-45deg, #0074FF, #28BF95); width: 50px; display: inline-flex; flex-flow: column wrap; align-items: center; justify-content: center;}
.goalWrap .goalBox .imgArea img {max-height: 34px;}
.supDetail {width: 100%; text-align: right; font-size: 0.9rem; font-weight: 500; margin-top: 0.5rem;}
.supDetail sup {}

/* 260724 성과공유 */
.imgArea img {max-width: 100%;}

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

    .proWrap.triple {gap: 1rem;}
    .proWrap.triple .proBox {width: calc( ( 100% - 2rem ) / 3 );}
    .proWrap.triple .proBox .titleArea {flex-flow: column wrap; }
    .proWrap.triple .proBox .titleArea .title {text-align: center;}
    .proWrap.triple .proBox .imgArea {margin-bottom: 0;}
    .proWrap .proBox .imgArea {min-height: 240px; display: flex;  flex-flow: column wrap;  align-items: center;  justify-content: center;}
}


@media only screen and (max-width:1280px){

}

@media only screen and (max-width:1024px){
    .show_1024 {display: block;}
    .p-titleWrap {  width: 100%;  padding: 2rem 1rem 1.5rem;}
    .p-titleWrap .num {  font-size: 1rem;  padding: 0.4rem 2rem;}
    .p-titleWrap .title {  margin-bottom: 1.5rem;  font-size: 1.4rem;}
    .p-titleWrap .title::after {bottom: -0.75rem;}
    .p-titleWrap .textArea {font-size: 0.95rem;}

    .nowWrap .nowBox {padding: 1rem 0.5rem;}
    .nowWrap .nowBox .nowTitle {font-size: 1.05rem; word-break: keep-all;}
    .nowWrap .nowBox .textArea {font-size: 0.9rem;  word-break: keep-all;}
    .nowWrap .nowBox .textArea br {display: none;}

    .proWrap {gap: 1rem;}
    .proWrap.double .proBox { width: calc((100% - 1rem) / 2);}
    .proWrap.triple .proBox { width: calc((100% - 2rem) / 3);}
    .proWrap .proBox .titleArea {margin-bottom: 1rem;}
    .proWrap .proBox .titleArea .num {font-size: 0.9rem; padding: 0.2rem 1rem;}
    .proWrap .proBox .titleArea .title {font-size: 1.1rem;}
    .proWrap .proBox .listArea .list .textArea {font-size: 0.95rem; }
    .proWrap .proBox .imgArea img {max-height: 180px;}

    .goalWrap .goalBox .titleArea .normal {font-size: 0.9rem; word-break: keep-all;}
    .goalWrap .goalBox .titleArea .accent {font-size: 1.1rem;}
    .goalWrap .goalBox .imgArea .decoBox {width: 42px;}
}

@media only screen and (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;}

    .nowWrap .nowBox {flex: unset; width: calc( ( 100% - 1rem ) / 2 );}
    .nowWrap .nowBox .textArea br {display: block;}

    .proWrap.double .proBox, .proWrap.triple .proBox  {width: 100%; display: flex;  flex-flow: row wrap;  align-items: flex-start;  justify-content: flex-start; gap: 1rem; }
    .proWrap .proBox .imgArea {width: 30%; order: 2; min-height: unset;}
    .proWrap .proBox .imgArea img {max-height: unset;}
    .proWrap .proBox .titleArea {order: 1; width: 100%; margin-bottom: 0.5rem; flex-flow: column wrap;}
    .proWrap .proBox .titleArea .num {font-size: 0.75rem; padding: 0.3rem 1rem 0.1rem;}
    .proWrap .proBox .listArea {order: 3; flex: 1;}
    .proWrap .proBox .listArea .list .dot {width: 6px;}
    .proWrap .proBox .listArea .list .textArea {font-size: 0.9rem;}

    .goalWrap.odd {justify-content: center;}
    .goalWrap .goalBox {flex: unset; width: calc( ( 100% - 1rem ) / 2 ); margin-bottom: 1rem;}
    .goalWrap .goalBox .imgArea .decoBox {width: 36px; height: 36px; }
    .goalWrap .goalBox .imgArea img {max-height: 24px;}
	
}

@media only screen and (max-width:550px){
    .nowWrap .nowBox {border-radius: 0.5rem; width: 100%;}
    .nowWrap .nowBox .num {font-size: 0.8rem;}
    .nowWrap .nowBox .nowTitle {font-size: 1rem;}
    .nowWrap .nowBox .textArea br {display: none;}

    .p-titleWrap {border-radius: 0.5rem; background-position: top left;}
    .p-titleWrap .num {padding: 0.3rem 1rem; width: 80%; font-size: 0.85rem;}
    .p-titleWrap .title {font-size: 1.2rem;}
    .p-titleWrap .title .show_1024 {display: none;}
    .p-titleWrap .textArea br {display: none;}
    .goalWrap .goalBox .num {font-size: 0.7rem; padding: 0.2rem 1rem 0.1rem;}
    .supDetail {margin-top: 0;}
    
    .proWrap .proBox {padding: 1rem; border-radius: 0.5rem;}
    .proWrap.double .proBox, .proWrap.triple .proBox {flex-flow: column wrap; align-items: center;}
    .proWrap .proBox .imgArea {width: 100%; order: 1; margin-bottom: 0;}
    .proWrap .proBox .imgArea img {max-height: 150px;}
    .proWrap .proBox .titleArea {order: 2; margin-bottom: 0;width: auto;}

}

@media only screen and (max-width:425px){

}

@media only screen and (max-width:375px){

}