@charset "UTF-8";

.main-wrap {padding-top:12rem;}

.mainCont-wrap {display:flex;gap:2rem;flex-wrap:wrap;padding:4rem 4rem 9rem;}
.main-l{width:calc(31% - 1rem); position:relative;}
.main-r {width:calc(69% - 1rem);}
.main-r .arti_half{width: 100%; display: flex; align-items: flex-start; gap: 2rem;}
.main-r:after {content:"";display:block;clear:both;}

.mctit {font-family: 'GmarketSans', sans-serif;font-weight:500;font-size:2rem;}


/* ---------- 메인 비주얼 ---------- */
.mvis {width:100%; height: 100%;max-height: 62rem; background-repeat:no-repeat;background-position:center bottom;background-size:100% auto;background-color:#4769f8;position:relative;border-radius:0 2rem 2rem 2rem;overflow:hidden;}
.mvis-inwrap {padding:7rem 6rem;position:relative;z-index:1; height:100%;}
.mvis-title h2 {color:#fff;font-family: 'GmarketSans', sans-serif;font-weight:600;font-size:2.4rem; line-height:1.3;}
.mvis-title h3 {color:#fff;font-family: 'GmarketSans', sans-serif;font-weight:600;font-size:2.4rem;line-height:1.3;}
.mvis-title h4 {color:#fff;font-family: 'GmarketSans', sans-serif;font-weight:300;font-size:2.4rem;line-height:1.3;}
.mvis-logo{ position: absolute; bottom: 7rem; left: 6rem;} 
.mvis-logo img{width:10rem;}

/* ---------- 알림마당 ---------- */
.mboard{width: calc(66.66% - 1rem);}
.mboard-sld .swiper-wrapper{width: 100%;display: flex;align-items: flex-start;flex-wrap: wrap;gap: 2rem;}
.mboard-sld .swiper-slide{width: calc(50% - 1rem);}
.mboard-sld .swiper-slide a {width:100%; height:30rem;display:flex;flex-direction: column;border:1px solid #e1e4e8;border-radius:2rem;padding:3rem;transition:all .3s;}
.mboard-sld .swiper-slide .tit,
.mboard-sld .swiper-slide .txt {line-height:1.6em;height: 3.2em;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;word-wrap:break-word;}
.mboard-sld .swiper-slide .tit {font-size:1.8rem;font-weight:600; margin-bottom: 2rem;}
.mboard-sld .swiper-slide .txt {font-size:1.5rem;color:#666;}
.mboard-sld .swiper-slide .bottom {margin-top:auto;display:flex;align-items:center;}
.mboard-sld .swiper-slide .bottom .date {font-size:1.4rem;position:relative;padding-left:20px;}
.mboard-sld .swiper-slide .bottom .date:before {content:"";position:absolute;top:50%;left:0;margin-top:-7px;width:15px;height:15px;display:block;background:url(/onnuri/home/img/Main/dateIcon.svg) no-repeat center center;}
.mboard-sld .swiper-slide .bottom .cate {margin-left:auto;font-size:1.4rem;font-weight:600;}
.mboard-sld .swiper-slide .bottom .cate.guchung {color:#4769f8;}
.mboard-sld .swiper-slide .bottom .cate.johap {color:#02983b;}
.mboard > .mboard-sld_nodata {min-height:62rem;}
.mboard-sld_nodata {height:30rem; text-align:center;border:1px solid #e1e4e8;border-radius:10px;display:flex;align-items:center;justify-content:center;text-align:center;}
.mboard-sld_nodata span {display:inline-block;color:#767676;line-height: 140%;}
.mboard-sld_nodata span:before {content:"";display:block;margin:0 auto 2rem;width: 30px;height: 30px;background: url(/onnuri/home/img/Main/board-nodata2.svg) no-repeat center center / 30px;}


/* 추진경과, 위치도, 배치도, 조감도 */
.mcubes{width: calc(33.33% - 1rem);}
.mimg {height:30rem;border-radius:2rem;padding:4rem 3rem;background:#f4f4f4;margin-top: 2rem;}
.mimg-tabWrap {margin-bottom:3rem;}
.mimg-tab {display:flex;align-items:center;justify-content: space-between;}
.mimg-tab a {font-family: 'GmarketSans', sans-serif;font-weight:500;font-size:2rem;color:#888888;margin:0 1rem;}
.mimg-tab li a[aria-selected="true"] {color:#222;}
.mimg-cont figure {position:relative;border-radius:0 0 10px 10px;overflow:hidden;}
.mimg-cont figure:after {content:"";display:block;height:0;padding-bottom:66.66%;}
.mimg-cont figure img {position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;}

.mchujin{height:30rem;border-radius:2rem 0 2rem 2rem;padding:3rem;background:#f4f4f4;}
.mchujinClone{display:none; position: absolute; bottom: 2rem; width: calc(100% - 8rem); left: 50%; transform: translateX(-50%); z-index: 1;}
.mchujin .itembox{width: 100%; background: #fff; border-radius: 10px; margin-bottom:1rem; overflow: hidden;}
.mchujin .itembox p{text-align: center;}
.mchujin .itembox .date{color: #0dba4f; font-weight: 600; padding-top: 5rem;}
.mchujin .itembox .txt{font-family: 'GmarketSans'; font-size: 2rem; padding: 1.5rem 0 3rem;}
.mchujin button{width: 100%; height: 5rem;}
.mchujin button span{color: #fff; position: relative;  padding-left: 2.8rem; font-size: 1.5rem;}
.mchujin .Chujin-allopen{background:var(--point2-color);}
.mchujin .Chujin-allopen span:before {content:"";position:absolute;top:50%;left:0;margin-top:-10px;display:block;width:20px;height:20px;background:url(/onnuri/home/img/Main/Chujin-allBtn.svg) no-repeat center center;}
.mchujin .Chujung-allopen{background:var(--point-color); border-radius: 1rem;}
.mchujin .Chujung-allopen span:before {content:"";position:absolute;top:50%;left:0;margin-top:-10px;display:block;width:20px;height:20px;background:url(/onnuri/home/img/Main/Chujung-allBtn.svg) no-repeat center center;}


/* 최근 공개자료 */
.mdata {width: calc(66.66% - 1rem);height:30rem;border:1px solid #e1e4e8;border-radius:2rem;padding:4rem 3rem;}
.mdata-title {display:flex;align-items:center;margin-bottom:3rem;}
.mdata-title .mmore {margin-left:auto;}
.mdata ul {position:relative;}
.mdata ul li + li {margin-top:3rem;}
.mdata ul li a {display:flex;align-items:center;}
.mdata ul li a .txt {min-width:0;flex:1;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;overflow:hidden;}
.mdata ul li a .date {margin-left:auto;font-size:1.4rem;color:#767676;}
.mdata ul li.nodata {padding-top:5rem;text-align:center;color:#767676;}
.mdata ul li.nodata:before {content:"";display:block;margin:0 auto 2rem;width:19px;height:25px;background:url(/onnuri/home/img/Main/board-nodata.svg) no-repeat center center;}



/* 바로가기 버튼 */
.mblink {flex:none;display:flex;flex-direction:column;gap: 2rem;width: calc(33.33% - 1rem);}
.mblink a {flex:1;display:flex;align-items:center;background:var(--gray-color);font-size:1.8rem;font-family: 'GmarketSans';padding: 3.5rem 8rem 3.3rem 3rem;position:relative;transition:all .3s;border-radius:1rem;}
.mblink a .icon {position:absolute;top:50%;right:4rem;margin-top:-1.7rem;width:3.4rem;height:3.4rem;background-size:100% auto;background-repeat:no-repeat;background-position:center center;}
.mblink a.process .icon {background-image:url(/onnuri/portal/img/Main/mblink-process.svg);}
.mblink a.click .icon {background-image:url(/onnuri/home/img/Main/mblink-click.svg);}
.mblink a.info .icon {background-image:url(/onnuri/home/img/Main/mblink-info.svg);}


/* 주요 추진경과 현황 팝업 */
#chujinlPop.layerpop-wrap {display:none;position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.8);z-index:999;}
#chujinlPop .layerpop-flex {width:calc(100% - 4rem);height:calc(100% - 6rem);margin:3rem auto;display:flex;align-items:center;justify-content:center;}
#chujinlPop .layerpop {width:580px;max-width:100%;max-height:100%;margin:0 auto;position:relative;display:flex;flex-direction:column;border-radius:10px;overflow:hidden;}
#chujinlPop .layerpop .layerpop-title {flex:0 0 10rem;width:100%;height:10rem;background:var(--point2-color);padding:1rem 6rem 1rem 5rem;display:flex;align-items:center;flex-wrap:wrap;}
#chujinlPop .layerpop .layerpop-title:focus-visible {outline:auto;}
#chujinlPop .layerpop .layerpop-title h2 {display:inline-block;padding-left:30px;color:#fff;font-weight:600;font-size:2.4rem;font-family: 'GmarketSans', sans-serif;padding-top:1rem;position:relative;}
#chujinlPop .layerpop .layerpop-title h2:before {content:"";position:absolute;left:0;top:50%;margin-top:-10px;display:block;width:20px;height:20px;background:url(/onnuri/home/img/Main/ChujinlPop-title.svg) no-repeat center center;}
#chujinlPop .layerpop .layerpop-content {width:100%;background:#fff;padding:4rem 3rem 4rem 5rem;}
#chujinlPop .layerpop .layerpop-content:focus-visible {outline:auto;}
#chujinlPop .layerpop .layerpop-content img {max-width:100%;}
#chujinlPop .layerpop .layerpop-close {position:absolute;top:35px;right:3rem;}
#chujinlPop .layerpop .layerpop-close .icon {position:relative;display:block;width:30px;height:30px;}
#chujinlPop .layerpop .layerpop-close .icon:before,
#chujinlPop .layerpop .layerpop-close .icon:after {content:"";position:absolute;top:50%;left:50%;margin:-1px 0 0 -15px;display:block;width:30px;height:1px;border-radius:2rem;background:#fff;}
#chujinlPop .layerpop .layerpop-close .icon:before {transform:rotate(45deg);}
#chujinlPop .layerpop .layerpop-close .icon:after {transform:rotate(-45deg);}
#chujinlPop .layerpop-scr {max-height:calc(100vh - 24rem);overflow:auto;}
#chujinlPop .layerpop-scr::-webkit-scrollbar {width:3px;border-radius:10px;}
#chujinlPop .layerpop-scr::-webkit-scrollbar-thumb {background:#222}
#chujinlPop .layerpop-scr::-webkit-scrollbar-track {background:rgba(0, 0, 0, 0.05);}
#chujinlPop .chujinlPop-lst {position:relative;padding-right:2rem;}
#chujinlPop .chujinlPop-lst:before {content:"";position:absolute;top:0;left:10px;display:block;width:1px;height:100%;background:#eff1f4;}
#chujinlPop .chujinlPop-lst li {position:relative;padding-left:30px;z-index:1;}
#chujinlPop .chujinlPop-lst li + li {margin-top:4rem;}
#chujinlPop .chujinlPop-lst li + li:has(.date) {margin-top:3rem;}
#chujinlPop .chujinlPop-lst li:before {content:"";position:absolute;top:4px;left:0;display:block;width:22px;height:22px;border-radius:50%;background:#eff1f4;}
#chujinlPop .chujinlPop-lst li.end:before {background:url(/onnuri/home/img/Main/ChujinlPop-chk.svg) no-repeat center center #222;}
#chujinlPop .chujinlPop-lst li.now:before {background:url(/onnuri/home/img/Main/ChujinlPop-chk.svg) no-repeat center center var(--point2-color);}
#chujinlPop .chujinlPop-lst .txt {font-weight:600;font-size:1.8rem;line-height:160%;color:#767676;}
#chujinlPop .chujinlPop-lst .date {font-weight:600;color:#767676;font-size:1.4rem;margin-top:0.5rem;}
#chujinlPop .chujinlPop-lst li.end .txt {color:#222;}
#chujinlPop .chujinlPop-lst li.now .txt {color:var(--point2-color);}
#chujinlPop .chujinlPop-lst li.now .date {color:var(--point2-color);}


	@media screen and (min-width:1200px) {
	
		.mboard-sld .swiper-slide a:hover,
		.mboard-sld .swiper-slide a:focus {background:#f4f4f4;box-shadow:0 15px 25px rgba(0, 0, 0, 0.03);}
		
		.mblink a:hover {background:#249d4c;color:#fff;box-shadow:0 1rem 1.5rem rgba(0, 0, 0, 0.1);}
	}
	
	
	@media screen and (max-width:1500px){
	
		.mimg-tab a {font-size:1.6rem;margin:0;}
	}
	
	@media screen and (max-width:1200px){
		
		.main-l{width:100%;}
		.main-r{width:100%;}
		.main-r .arti_half{flex-direction: column;}
		
		.mainCont-wrap {padding-left:2rem;padding-right:2rem;padding-top:2rem;}
		.mainCont-wrap {display:block;}		
		
		.main-wrap {padding-top:11rem;}
		.mvis {width:100%;margin-bottom:4rem;height: 59rem;}		
		.mvis-logo{display:none;} 
		
		.mboard{width:100%;}
		.mboard-sld{width:calc(100% + 2rem);}
		.mboard-sld .swiper-wrapper{flex-wrap: nowrap; gap:0;}
		.mboard-sld .swiper-slide {width:300px; max-width: 80%; margin-right:2rem;}
		
		.mboard > .mboard-sld_nodata{min-height:auto;}
		
		.mcubes{width:100%;}
		.mimg {height:auto;width:100%;}		
		.mimg-tab {justify-content:center}
		.mimg-tab a {font-size:2rem;margin:0 1rem;}
		.mcubes .mchujin{display:none;}
		.mchujinClone{display:block; width: calc(100% - 4rem);}
		
		.mdata {height:auto;width:100%;margin:2rem 0;}
		.mdata ul li a {display:block;}
		.mdata ul li .txt {margin-bottom:1rem;}
		.mdata ul li.nodata {padding-top:2.5rem;padding-bottom:2rem;}
		
		.mblink {width:100%;}
		.mblink a {min-height:8rem;padding:2.2rem 9rem 1.8rem 3rem;line-height:120%;}
		.mblink a .icon {right:3rem;}
		
		
	}
	
	@media screen and (max-width:500px){
		
		#chujinlPop .layerpop .layerpop-title {padding-left:3rem;}
		#chujinlPop .layerpop .layerpop-close {right:2rem;}
		#chujinlPop .layerpop .layerpop-content {padding-left:3rem;padding-right:2rem;}
		.mchujin.m_rspvn{ width: calc(100% - 5rem);}
	}