/* 메인 */
.main-visual { width: 100%; min-height: 950px; background: #007bff url('/images/egovframework/com/cmm/custom/main-bg.jpg') center top no-repeat; background-size: cover; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: bold; padding-top:11.5em; padding-bottom:9em}
.main-visual .main-text {margin-bottom:4.38em;}
.main-visual .main-text h2 {font-size: 45px; font-weight: 300;}
.main-visual .main-text h2 strong { font-size:53px; color:var(--bs-cyan); font-weight: 600; }
.main-visual .main-text p { font-family: 'S-Core'; font-size:20px;  font-weight: 400; margin-top:15px;}
.service-list {display: flex; flex-wrap: wrap;}
.service-list li { width:calc(100% / 3 - 10px); margin:5px}
.service-list li a {position:relative; display: block; background: #fff; border-radius: 10px; color:var(--bs-dark); height:195px; padding:40px 30px;}
.service-list li a span {font-family: 'S-Core'; font-size:20px; font-weight: 500; letter-spacing: -1.5pt;}
.service-list li a:hover {background-color: #D5DAFF;}
.service-list li a img {width:65px; height:65px; position: absolute; right:30px; bottom:30px;}
.service-list li a:hover img {transform: rotate(720deg); transition: all .5s ease;}
.service-list li > img {max-width: 100%; max-height:180px; display: flex; padding-top: 30px; float: right;}


.calendar-area { position: relative; font-family: 'S-Core'; background: #fff; padding:20px 30px; border-radius: 10px;}
.calendar-area .calendar-head {display: flex; align-items: center; justify-content: space-between; padding: 0 0 20px  0; border-bottom:1px solid var(--bs-secondary);}
.calendar-area .calendar-head .calendar-title h4 { font-size: 24px; font-weight: bold; color:var(--bs-primary); letter-spacing: -.7pt;}
.calendar-area .calendar-head .calendar-control .month-control {display: flex;  align-items: center; }
.calendar-area .calendar-head .month-btn { color: #444; background: #F1F5F9; border:0; font-size:18px; border-radius: 50%; width:44px; height:44px; line-height: 40px; margin-left:10px;} 
.calendar-area .calendar .sun { color: #FF4444 !important; }
.calendar-area .calendar .sat { color: #4D5AE1 !important; }
.calendar-area .calendar .calendar-week,
.calendar-area .calendar .calendar-date { display: flex; flex-wrap: wrap; text-align: center; }
.calendar-area .calendar .calendar-week > div,
.calendar-area .calendar .calendar-date > div { width: calc(100% / 7); color: #222; font-weight: 400;}
.calendar-area .calendar .calendar-week > div {font-family: 'S-Core'; line-height: 1.5em; font-size:18px; font-weight: 500; margin-top:1em;}
.calendar-area .calendar .calendar-date > div { line-height: 3em; margin: 0.15em 0;  display: flex; align-items: center; justify-content: center; cursor: pointer;}
.calendar-area .calendar .calendar-date > div > span {font-size: 18px; font-family: 'S-Core';}

.date { display: inline-block; line-height: 40px; text-align: center; margin: 5px; border-radius: 50%; cursor: pointer; transition: all 0.3s; }
.date.selected { background: var(--bs-primary);}
.date.selected span{ color:#fff; }
.date.selected.single {border-radius: 40px; }
.date.selected.range { border-radius: 0; }
.date.selected.range.first-child { border-top-left-radius: 40px; border-bottom-left-radius: 40px; }
.date.selected.range.last-child { border-top-right-radius: 40px; border-bottom-right-radius: 40px; }

#visual-con h5 {position: relative; margin-bottom:15px; height:30px; }
#visual-con h5 span {z-index:10; position: absolute;font-size: 24px; font-weight: 600; }
#visual-con h5 span::after { position: absolute; content: ''; height:13px; width:100%; bottom:0; background: rgba(21,251,255,.3); z-index:-1; left:0;}

.main-content { height:700px; padding:0 20px; background: url('/images/egovframework/com/cmm/custom/news_bg.jpg') no-repeat; }
.main-content .container {padding:5.63em 0 10.63em 0;  }
.main-content .main-title h4 {color:#1d1d1d; font-size: 40px; font-weight: 700;}
.main-content .tabs { display: flex; flex-direction: column; margin-top:30px;}
.main-content .tabs .tab { width:210px; font-family: 'S-Core'; padding: 20px; color: #666; border: none; cursor: pointer; text-align: left; font-size:20px; margin-bottom:10px; background: none; transition: background-color 0.3s ease; }
.main-content .tab:hover, .main-content .tab.active { background:#A40182 url('/images/egovframework/com/cmm/custom/icon-hover.png') 160px center no-repeat; color:#fff; border-radius: 10px; }
.main-content .slide { display: none; width: 100%; height: 100%; position: relative; }
.main-content .slide.active { display: block; }
.main-content .col-md-9 {overflow: hidden;}
.main-content .swiper-container { width: 100%; position: relative; overflow: visible; height: 100%; }
.main-content .swiper-wrapper {padding-top:20px;}
.main-content .swiper-slide { display: flex; justify-content: center; font-size: 1.5em; background-color: #fff; border-radius: 10px; padding:40px 30px; border:1px solid #ddd; transition: all .3s ease; }
.main-content .swiper-slide:hover {border:2px solid var(--bs-purple); box-shadow: 0 20px 20px rgba(175, 188, 201, 0.3);}
.main-content .swiper-slide a h6 { display: inline-block; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size:20px; color:#222; white-space: normal; line-height: 1.4;
  height: 2.8em; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom:20px; }
.main-content .swiper-slide a p { overflow: hidden; text-overflow: ellipsis; font-size:16px; color:#444; 
white-space: normal; line-height: 1.5; height: 4.5em; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; margin-bottom: 40px; }
.main-content .swiper-slide a span { color:#888; font-size:16px; margin-top:40px; clear: both; }
.swiper-buttons { position: relative; float:right; display: flex; justify-content:end; width: 140px; height:60px; }
.swiper-button { background-color: #333; color: #fff; padding: 10px; border-radius: 50%; cursor: pointer;}
.swiper-button-next,
.swiper-button-prev { position: absolute; z-index: 10; width: 60px; height: 60px; background-color: #fff;
border:1px solid #ddd; border-radius: 10px;}
.swiper-button-prev:after, .swiper-button-next:after {content: none;}
.swiper-button-next {right: 0;}
.swiper-button-prev { right: 70px;}


@media screen and (max-width:991px) {
  
	.main-visual {height:auto;}
	.calendar-area .calendar .calendar-date > div > span {font-size:15px;}

}

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

	.main-visual {min-height: auto; padding:8em 0 4em;}
	.main-visual .main-text {margin-bottom:2.38em;}
	.main-visual .main-text h2 {font-size: 24px;}
	.main-visual .main-text h2 strong { font-size:28px;}
	.main-visual .main-text p {font-size:16px;}

	#visual-con h5 span {font-size:1.18em;}
	.service-list li {width: calc(100% / 2 - 10px);}
	.service-list li a {height: 120px; padding:20px;}
	.service-list li a img {width:45px; height:45px; right:20px; bottom:20px;}
	.service-list li > img {max-height: 120px;}

	.main-content {height:auto;}  
	.main-content .container {padding:3em 0 4em 0;}
	.main-content .main-title h4 {font-size: 2em;}
	.main-content .tabs { display: flex; flex-direction:row;}
	.main-content .tabs .tab {font-size: 16px; padding:15px 10px}
	.main-content .tab:hover, .main-content .tab.active {background-image: none;}
	.swiper-button-next,
	.swiper-button-prev {width:40px; height:40px; }
	.swiper-buttons {width:100px;}
	.main-content .swiper-wrapper {padding-top: 0;}

}



/* 공통 */
.section {padding:40px 0 110px;}
.container {max-width: 1350px;}

.sub-content {padding:60px 0 140px}
.sub-content h3 {margin-bottom:20px; font-weight: 600; color:#222;}
.sub-content .btn {font-size: 1em;}
.bg-gray {background-color:#F1F5F9;}

.sub-top {position: relative; width: 100%; background:#007bff url('../../../../images/egovframework/com/cmm/custom/sub-top-banner.jpg')center top no-repeat;background-size: cover; }
.sub-top.mypage { background: url('../../../../images/egovframework/com/cmm/custom/sub-top-mypage.jpg')center top no-repeat;}
.sub-top-banner { height: 290px; display: flex; align-items: center; justify-content: center; color: #fff;}
.sub-top .sub-top-banner .sub-top-tit {margin-top:4.38em; text-align: center;} 
.sub-top .sub-top-tit h2 {font-size: 45px; font-weight: 600;}
.sub-top .sub-top-tit p { font-family: 'S-Core'; font-size:18px;  font-weight: 400; margin-top:10px;}

.menu-container {position: relative; background:url('../../../../images/egovframework/com/cmm/custom/sub-menu-bg.png') left top no-repeat;
height: 60px;}
.menu-container::before {content:''; position: absolute; background: var(--bs-primary); height: 60px; width:10%; z-index: 0;}

.sub-dropdown { display: none; background: none; width:100%; padding: 13px 20px; color: #fff;
border: none; cursor: pointer; font-family: 'S-Core'; }
.sub-menu { display: inline-flex; padding: 0; margin: 0 auto; justify-content: center;}
.sub-menu li a {color:#fff; padding:0 30px; height: 60px;line-height: 60px; font-family: 'S-Core'; display: block;}
.sub-menu li a.on {background: #fff; color: var(--bs-primary);}
.sub-menu li a::after {position: absolute; content: ''; width: 6px; height:6px; border-radius: 6px; background: rgba(255,255,255,.3); top:26px; margin-left:30px;}
.sub-menu li:last-child a::after, .sub-menu li a.on::after {display: none;}

.btn {font-family: 'S-Core';}

@media (max-width: 1024px) {
	.menu-container::before {width: 12%;}
}

@media (max-width: 991px) {
	.sub-content {padding:30px 0 80px}
	.menu-container {height:50px;}
	.menu-container::before {height: 49px;}
	.sub-dropdown {display: block; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
  	.sub-menu {display: none; position: absolute; top: 100%; left: 0; width: 100%; background-color: #fff;
	  flex-direction: column; box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1);}
	.sub-menu li a::after {display: none;}
	.menu-item { border-bottom: 1px solid rgba(255, 255, 255, 0.1); margin-right: 0;}
  	.menu-item:last-child { border-bottom: none;}
}


@media screen and  (max-width: 1230px) {
	.sub-menu {background: var(--bs-primary); width: 100%;  z-index:1;}
}

@media screen and (max-width:991px) {
    body,html {font-size:15px}

    .section {padding:40px 0 8%;}
	.sub-top-banner { height: 200px;}
	.sub-top .sub-top-banner .sub-top-tit {margin-top:4em; } 
	.sub-top .sub-top-tit h2 {font-size: 32px;}
	.sub-top .sub-top-tit p { font-size:16px; margin-top:0;}
}


@media screen and (max-width: 768px) {
    body,html {font-size:15px}    
}


/* 지도 */

.map {display: flex;}
.map-search {display: flex; width: 100%; max-width: 650px; margin:0 auto; border-bottom: 3px solid var(--bs-primary); height: 50px;}
.map-search input {background: none; border:0; width: calc(100% - 30px); font-family: 'S-Core';}
.map-search .btn-search {width:50px; height: 50px; background: none; border: 0;}

.mapIn {position: relative; height: calc(100vh - 205px); background-color: #ddd; }
.map-list p.total {text-align: center; padding:0 10px 10px;}
.map-list p.total b {color: var(--bs-primary);}
.map-list .list {overflow-y: scroll; height: calc(100vh - 240px);}
.map-list .list li {position: relative; margin-bottom:10px; margin-right: 5px;}
.map-list .list li a {display: flex; align-items: center; padding:20px; background: #fff; border-radius: 10px; border:2px solid transparent;}
.map-list .list li a:hover {border:2px solid var(--bs-purple); box-shadow: rgba(164,1,130,0.1);}
.map-list .list li a img {margin-right:10px;}
.map-list .list li a h6 {font-size:18px; font-weight: bold; letter-spacing: -1pt;}
.map-list .list li a span {color:#666;}
.map-list .list li a .pin {position:absolute; right:20px; top:15px;  width:30px; height:30px; background: rgba(68, 91, 242, 0.1); border:1px solid #c7cdfa; border-radius: 50px; text-align: center; padding-top:3px}

.scrollBar::-webkit-scrollbar {width: 6px;}
.scrollBar::-webkit-scrollbar-thumb {height: 30%; background: #D5E0F0; border-radius: 10px;}
.scrollBar::-webkit-scrollbar-track {background:none;}

.wideScrollBar::-webkit-scrollbar {height: 5px;}
.wideScrollBar::-webkit-scrollbar-thumb {background: #D5E0F0; border-radius: 10px;}
.wideScrollBar::-webkit-scrollbar-track {background:none;}


.map-box {padding: 20px;}
.pull {position:absolute; padding: 20px; width:350px; height:185px; border-radius: 8px;}
.pull.wh {background-color: #fff;}
.pull.wh:after {content:""; position: absolute; right: 175px; top: 185px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 15px solid #fff;}
.pull.wh h6 {font-weight: bold; font-size:18px; padding-bottom:5px;}
.pull.wh dl {color:#666; font-size:14px; width: 100%; clear: both;}
.pull.wh dl dt {font-weight: 600; width:90px; color:#222; float: left; padding-left:7px;}
.pull.wh dl dt::before {position: absolute; content: ''; width: 3px; height: 3px; background: #222; margin-left:-5px; margin-top:10px;}
.pull.wh dl dd {width: calc(100% - 90px); margin-left:90px;}
.pull.wh .close {position: absolute; right:20px;}
.pull.wh .btn-purple {background-color: var(--bs-purple); color:#Fff;}

@media screen and (max-width:991px) {
	.map {display: block;}
	/*.map-list {display: none;}*/
}


/* 게시판 */
.bd-top {display: flex; align-items: center; justify-content: space-between; background-color: #F1F5F9; border-radius: 20px;}
.btn-bd-search {background: #94A2B8;}
.btn-submit {padding:10px 30px;}
.search {width: 75%;}
.search .search-in {display: flex; align-items: stretch;}
.search .search-in input {position: relative;  font-size: 14px; margin-right: 5px;  min-width: 0;}
.search .search-in .btn {color:#fff; display: flex; align-items: center;}
.search .search-in select, .search .search-in input {font-size: 14px;}


.table {margin-bottom:0;}
.table thead tr th, .table tbody tr td {word-break: keep-all; padding: 15px;  white-space: nowrap;}
.table-basic thead tr th {font-weight: 700; background-color: #F9FAFB; font-family: 'S-Core'; border-bottom:var(--bs-border-width) solid var(--bs-border-color);  border-top:2px solid #222; text-align: center;}
.table-basic tbody tr td {border-bottom:var(--bs-border-width) solid var(--bs-border-color);vertical-align: middle; table-layout: auto; color:var(--bs-secondary-color); text-align: center;}
.table-basic tbody tr td a {display: block;}
.table-basic tbody tr td a:hover {font-weight: bold;}

/*페이지*/
.pagination li:first-child a, .pagination li:last-child a {color:#8e8e8e}
.pagination .page-link {border:0; background: none; color: var(--bs-emphasis-color); white-space: nowrap;}
.pagination .page-link.active {background: var(--bs-primary); border-radius: 30px; width:35px; text-align: center; color:#fff;}


.bd-view .bd-tit {border-bottom:1px solid #e5e5e5; border-top:1px solid #222;}
.bd-view .bd-tit h5 {text-align: center; padding:20px 0; /* 20241125 박태균 추가 */ color: #000000}
.bd-view .bd-tit ul {display: flex; justify-content: center; background: #F9FAFB; padding:20px 0;}
.bd-view .bd-tit ul li {color:#222; font-weight: 600; font-size: 15px; margin:0 10px;}
.bd-view .bd-tit ul li span {color:#555;padding-right:5px; margin-right:5px;}
.bd-view .bd-tit ul li span::after {content: ''; position: absolute; width:1px; height:12px; background: #ddd; margin-left:8px; margin-top:6px;}

.bd-view .cont {padding:30px; border-bottom:1px solid #e5e5e5; margin-bottom:30px; color: #000000}
.bd-view .cont img {max-width: 100%;}

.bd-wirte {border-top:1px solid #222;}
.bd-wirte li {display: flex; border-bottom:1px solid #e5e5e5}
.bd-wirte li .tit {width:180px; padding:20px 10px; background: #F9FAFB; font-family: 'S-Core'; /* 20241125 박태균 추가 */color: #000000;}
.bd-wirte li .tit b {color:var(--bs-red)}
.bd-wirte li .con {width: calc(100% - 180px); padding:10px;}
.bd-wirte li .con textarea {min-height: 250px;}



.gallery-item { border: 2px solid transparent; transition: border-color 0.3s ease;}
.gallery-item .card-title {font-size:1.2rem}
.gallery-item .card-text {color:#777; font-size: 14px;}
.gallery-item:hover {border-color: var(--bs-primary); box-shadow: 0 10px 10px rgba(68, 91, 242, 0.1);}

/*faq*/
.faq {border-top:1px solid #222; }
.faq .accordion-header {border-bottom:1px solid #eee;}
.faq .accordion-header span {color:#E6EBF3; font-size:50px; font-weight: 600; margin-right:20px }
.faq .accordion-button:not(.collapsed) {background-color: #fff; box-shadow: none;}
.faq .accordion-item {border:0;}
.faq .accordion-body {background: #F1F5F9; padding:30px;}
.faq .accordion-body span {color:var(--bs-primary); font-size:50px; font-weight: 600; margin-right:20px }
.faq .accordion-header, .faq .accordion-body {display: flex; align-items: center;}

/* 댓글창 */
.comment-list {background: #F1F5F9;}
.comment-list li {padding:10px 0; border-bottom:1px solid #ddd;}
.comment-list li small {color:#999;}
.comment-list li .btn {width:25px; height:25px; font-size: 12px; padding:0;}
.comment .btn {white-space: nowrap;}

@media screen and (max-width:991px) {
	.bd-top {display: block;}
	.bd-top .total {margin-bottom:10px;}
	.gallery-item .card-title {font-size:1rem}
	.gallery-item .card-text {color:#777; font-size: 12px;}
	.pagination .page-link {font-size:12px; padding:6px;}
	.bd-wirte li {display: block;}
	.bd-wirte li .tit {background: none; padding-bottom: 0;}
	.bd-wirte li .con {width: calc(100%);}
	.faq .accordion-header span, .faq .accordion-body span {font-size: 24px;}
	.search {width: 100%;}

}

/*생활정보*/
.life-info {display: flex; border-radius: 20px; width:100%;}
.life-info .left {background-color: #F5F7FB; width:45%; padding:30px 10px; border-radius: 20px 0 0 20px; display: flex; justify-content: center; align-items: center;}
.life-info .left.bottom {align-items:end; padding:30px 0 0}
.life-info .img img {width:100%; max-width: 500px; text-align: center; }
.life-info .txt {width:55%; padding:50px 30px; text-align: center; background: #505A69 url('/images/egovframework/com/cmm/custom/img-life-bg.png') right bottom no-repeat; border-radius: 0 20px 20px 0; display: flex; align-items: center; justify-content: center; }
.life-info .txt .lifeIn {text-align: center;}
.life-info .txt .lifeIn h6 {color:#fff; font-weight: 400; max-width: 400px; margin:0 auto}
.life-info .txt .lifeIn a {display: block; padding:15px 10px; max-width: 340px; margin:0 auto;}
.life-info .txt .lifeIn ul {display: flex; margin:30px auto;}
.life-info .txt .lifeIn ul li {width:calc(100% / 3 - 20px); margin:10px; color:#fff; border:1px solid rgba(255, 255, 255, 0.2); padding:15px; border-radius: 10px; letter-spacing: -1pt; background: rgba(255,255,255,0.07);}
.life-info .txt .lifeIn ul li p {font-size:20px; font-weight: bold;}

@media screen and (max-width:991px) {
	.life-info {display: block;}
	.life-info .left {width:100%; border-radius: 20px 20px 0 0;}
	.life-info .txt {width:100%; border-radius: 0 0 20px 20px; padding:20px 10px;}
	.life-info .txt .lifeIn ul {display: block;}
	.life-info .txt .lifeIn ul li {width:calc(100%); display: flex; align-items: center;}
	.life-info .txt .lifeIn ul li p {margin-left:15px;}
}


/* 마이페이지 */


.mypage .card {background: #fff; box-shadow: 0 10px 20px rgba(223,232,241,1); border:0;}
.mypage .user-profile {border-bottom:1px solid #e5e5e5; text-align: center; margin-bottom:20px;}
.mypage .user-profile h6 {font-size:24px; font-weight: 400;}
.mypage .user-profile ul {display: flex; justify-content: center; flex-wrap: wrap; margin:10px 0 20px 0}
.mypage .user-profile ul li {position: relative; margin:0 5px; color:#777;}
.mypage .user-profile ul li:first-child:after {content: ''; position: absolute; width:1px; height:15px; background: #ddd; top:4px; margin-left:5px;}
.mypage .user-profile a {background:#F5F7FB; color:#6E75A1; padding: 5px 10px; display: inline-block; margin-bottom:30px; }
.mypage .user-profile a i {font-size:13px;}
 
.mypage h3 {font-size:24px; text-align: left;}
.toggle-btn {display: none;}
#myMenu { display: flex; flex-direction: column; list-style-type: none; padding: 0; margin: 0; }
#myMenu li { width:100%; }
#myMenu li a {text-decoration: none; display: block; padding:5px 0; color: #333; letter-spacing: -1pt;}
#myMenu li a.on {font-weight: bold; color:var(--bs-primary)}

.inspection-info h5 {margin-bottom:10px;}
.inspection-info .box {background: #F1F5F9; padding:10px; border-radius: 10px;;}
.inspection-info .box p {font-weight: 600;}
.inspection-info .box ul {display: flex;}
.inspection-info .box ul li {width: 50%;}
.inspection-info .box ul li .normal {color: var(--bs-primary); border:1px solid var(--bs-primary);}
.inspection-info .box ul li .weird {color: var(--bs-red); border:1px solid var(--bs-red);}
.inspection-info .box ul li:first-child {color:var(--bs-primary);}
.inspection-info .box ul li:last-child {color:var(--bs-red);}
.inspection-info .box ul li .badge {background: #fff;}

.challenge-list > ul > li {position: relative; overflow: hidden; display: flex; justify-content:space-between; align-items: end; width: 100%; border-bottom:1px solid #e5e5e5; padding: 20px 0;}
.challenge-list > ul > li .info {width: calc(100% - 140px); z-index: 2;}
.challenge-list > ul > li .img {width:120px; height: 120px; overflow: hidden; display: flex; justify-content: center; align-items: center; overflow: hidden; border-radius: 10px; float: left;}
.challenge-list > ul > li .img img {height: 100%;  width: 100%; height: 100%; object-fit: cover;}
.challenge-list > ul > li .txt h6 {font-size:18px;}
.challenge-list > ul > li .txt ul {display: flex;}
.challenge-list > ul > li .txt ul li:first-child::after {content: ''; position: absolute; width: 1px; height: 12px; background-color: #e5e5e5; margin-left: 5px; margin-top:5px;}
.challenge-list > ul > li .txt ul li:first-child {padding-right: 5px; margin-right: 5px;}
.challenge-list > ul > li .txt p {color:#888; margin-top:10px;}
.challenge-list > ul > li .button {position: relative; height: 30px;}
.challenge-list > ul > li .button a {margin-bottom:10px; z-index: 11; position:absolute; right:0;}

.progress-bar-container { width: 100%; max-width: 100%; margin-top:5px; }
.progress-bar { position: relative; background-color: #F1F5F9; border-radius: 3px; height: 20px; margin-bottom: 15px; overflow: hidden;}
.progress-fill { height: 100%; background: linear-gradient(to right, #B2BDFF, #3447C4); transition: width 1s ease-in-out;}
.progress-text { position: absolute; padding-left:10px; font-size:12px; width: 100%; text-align: left; line-height: 20px; font-weight: bold; color: #ffffff;}
.challenge-list > ul > li::after {position: absolute; margin-top:-40px; right:0; z-index: 0; content: ''; width:120px; height:98px; background: url('../../../../images/egovframework/com/cmm/custom/user/img-completed2.png') center center no-repeat;}
.challenge-list > ul > li.complated::after {background: url('../../../../images/egovframework/com/cmm/custom/user/img-completed.png');}

.split-bar-container { width: 100%; max-width: 100%; margin: 0 auto 20px auto;}
.split-bar { display: flex; width: 100%; height: 30px; background-color: #e0e0e0; border-radius: 5px; overflow: hidden; position: relative;}
.bar-section { display: flex; align-items: center; justify-content: center; height: 100%; color: #ffffff; font-weight: bold; position: relative;}
.bar-section-left { background: var(--bs-primary); }
.bar-section-right { background: var(--bs-secondary); }
.bar-text { z-index: 1; font-size:14px; position: absolute; white-space: nowrap; margin:0 5px; text-align: left; left:0;} 


/* 모바일을 위한 미디어 쿼리 */
@media (max-width: 768px) {
	#myMenu {display: none;	 flex-direction: column;}
	.toggle-btn {display: block;}
	.challenge-list > ul > li {display: block;}
	.challenge-list > ul > li .info {width: calc(100%); display: flex;}
	.challenge-list > ul > li .img {width:80px; height:80px;}
	.challenge-list > ul > li .txt {font-size:14px;}
	.challenge-list > ul > li .button {position: relative; height: 30px;}
	.challenge-list > ul > li .button a {float:right; right: 0; position: absolute;}
	.challenge-list > ul > li::after {right:0; top:120px;}
	.bar-text { z-index: 1; font-size:12px;}
	
}