@charset "utf-8";

.m-title{font-size: 3rem; font-family: 'Paperlogy';}
/* ---------------------------------
            main-intro
------------------------------------*/

/*더보기 버튼*/
.more-btn {
    display: flex;
    align-items: center;
	font-weight: 500;
	font-size: 1rem;
	line-height: 150%;
    color: #1D1D1D;
}
.more-btn img {
	object-fit: contain;
    margin-top: -1px;
}



/* 메인배너 */
.main-intro .visual-slider {
	height: 560px;
	overflow: hidden;
}

.main-intro .visual-slider img {
	height: 100%;
	width: 100%;
    object-fit: cover;
}

.main-intro .main-bg{
	background: #F5F4FA;
}

.main-intro .main-bg img{
	position:absolute;
	left:0; right:0;
	top:0; bottom:0;
}

.main-intro .visual-txt{
	margin-top: 85px;
	z-index:10;
}

.main-intro .visual-txt .tit{
	font-size: clamp(2.0rem, 4vw, 3.5rem);
	margin-bottom:24px;
	line-height: 116%;
}

.main-intro .visual-txt .tit .linear{
	background: linear-gradient(-260deg, #3D189B 3%, #E51E2B 90%);
	-webkit-background-clip: text;
  	background-clip: text;
  
  	-webkit-text-fill-color: transparent;
  	color: transparent;
}

.main-intro .visual-txt .desc{
	font-size: clamp(0.9rem, 2vw, 1.125rem);
	
}

.m-visual .inner {
	position: relative;
}

.m-search-ai {
	position: absolute;
	left: 10px;
	right: 10px;
    bottom: 10rem;
    z-index: 1;
    max-width: 616px;
    /* width: 100%; */
}

.m-search-ai .input-fn {
    width: 100%;
    border: 3px solid #3D189B;
    border-radius: 4rem;
    background-color: #fff;
    
    box-shadow: 2px 4px 12px #00000014;
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    overflow: hidden;
}
.m-search-ai .input-fn input {
    border: unset;
    font-size: 1rem;
    padding: 1.2rem 2rem;
    width: calc(100% - 90px);
}

.m-search-ai .input-fn input:focus-visible {
    outline: unset;
}

.m-search-ai .btn-send {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    border-radius: 0 4rem 4rem 0;
    border: unset;
    background: #3D189B;
    color: #fff;
    padding: 20px 25px;
}

.m-search-ai .btn-voice {
	position: absolute;
    right: 0;
    bottom: -40px;
    
    background: unset;
    border: unset;
	font-weight: 500;
	font-size: 18px;
	line-height: 150%;
}




/*퀵메뉴*/
.main-intro .m-visual .quick-menu {
	padding: 51.5px 60px;
	box-shadow: 6px 6px 14px 0px #0000001F;
	background: #fff;

    border-radius: 2rem;
    /* position: absolute;
    left:0px;
    width: 100%;
    top: -50px;
    z-index: 1; */
    
    position:relative;
    width:100%;
    margin-top: -50px;
    z-index: 10;
    
    display: flex;
    align-items: center;
    gap: 60px;
}

.main-intro .m-visual .quick-menu .tit {
	font-family: Pretendard;
	font-weight: 700;
	/* font-size: 32px; */
	font-size: clamp(1.6rem, 4vw, 2rem);
	line-height: 120%;
	text-align: left;
	color: #1D1D1D;
	width: 220px;
    position: relative;
    
    border-right: 1px solid #E4E4E4;
}
/* .main-intro .m-visual .quick-menu .tit:after {
     content: '';
    position: absolute;
    width: 1px;
    background: 000;
    display: block;
	right: 0;
} */

.main-intro .m-visual .quick-menu .tit div {
    color: #3D189B;
}

.main-intro .m-visual .quick-menu .list {
	display: flex;
    justify-content: space-between;
	width: calc(100% - 300px);
}

.main-intro .m-visual .quick-menu .list .item {
	display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.main-intro .m-visual .quick-menu .list .item img {
	width: 60px;
	height: 60px;
    object-fit: contain;
}

.main-intro .m-visual .quick-menu .list .item .txt {
	font-weight: 700;
	font-size: 18px;
	line-height: 150%;
	color: #1D1D1D;
}


@media (max-width: 1024px) {
	.main-intro .m-visual .quick-menu {
		padding: 1rem;
	    flex-direction: column;
	    align-items: flex-start;
        gap: 20px;
        /* top: -90px; */
	}

	.main-intro .m-visual .quick-menu .list {
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
	}
	
	.main-intro .m-visual .quick-menu .list .item {
		width: 30%;
	}
	
	.main-intro .m-visual .quick-menu .tit {
		border: unset;
	}
	.main-intro .m-visual .quick-menu .list .item .txt {
	    font-size: 16px;
	}
}




/*나에게 해당되는 복지서비스*/
.my-service-section {
	position: relative;
	/* margin-top: 200px; */
	margin-top: 50px;
	padding-bottom: 100px;
}


.my-service-section .inner > .top {
	display: flex;
    justify-content: space-between;
    align-items: center;
   	margin-bottom: 16px;
}

.my-service-section .top > .tit {
	font-family: Pretendard;
	font-weight: 700;
	/* font-size: 32px; */
	font-size: clamp(1.4rem, 4vw, 2rem);
	line-height: 120%;
	color: #1D1D1D;
}
.my-service-section .top > .tit span {
	color: #3D189B;
}


.my-service-section .tab {
	display: flex;
	margin-bottom: 40px;
}

.my-service-section .tab li a {
	padding: 17px 20px 13px;
	font-weight: 500;
	font-size: 18px;
	cursor: pointer;
	color: #555555;
	border-bottom: 4px solid #1c285700;
}
.my-service-section .tab li a.active {
	font-weight: 700;
	color: #1C2857;
	border-color: #1C2857;
} 

.my-service-section .inner > .bot {
	display: flex;
	
}


.my-service-section .list {
	display: flex;
    gap: 20px;
    padding: 0 10px;
}
.my-service-section .list .item {
	display: flex;
    flex-direction: column;
	padding: 24px;
	border: 1px solid #E4E4E4;
	box-shadow: 6px 6px 14px 0px #0000001F;
	border-radius: 1.2rem ;
	background: #fff;
    /*width: 33.33%;*/
}
.my-service-section .list .item .tit {
	font-weight: 700;
	font-size: 20px;
	line-height: 150%;
	color: #1D1D1D;
	
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
		
	min-height: 60px;
	margin-bottom: 8px;
}

.my-service-section .list .item .txt {
	color: #555555;
	font-size: 1rem;
	font-weight: 400;
	
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	margin-bottom: 24px;
	min-height:48px;
}

.my-service-section .inner > .bot > img {
	object-fit: contain;
	margin-top: 88px;
	padding-left: 62px;
	padding-right: 23px;
}



.my-service-section .list .item .group {
	display: flex;
	gap: 4px;
}

.my-service-section .list .item .label {
	padding: 0 8px;
	font-size: 16px;
	font-weight: 400;
	border-radius: 4px; 
}

.my-service-section .list .item .label-1 {
	background: #EFE7F7;
	color: #3D189B;
}
.my-service-section .list .item .label-2 {
	background: #FCEAB2;
	color: #A0470B;
}
.my-service-section .list .item .label-3 {
	background: #CEEFF5;
	color: #297886;
}


.my-service-section .list .item .bot {
	display: flex;
    justify-content: space-between;
    align-items: center;
    
    margin-top: 72px;
}


.my-service-section .bg {
	height: 102px;
    width: 100%;
	background: linear-gradient(117.1deg, #3D189B 26.75%, #E51E2B 115.88%);
	position: absolute;
	border-radius: 4rem 0 0 4rem;
    bottom: 60px;
    z-index: -1;
}

#welfareList .swiper-wrapper{
	padding-bottom: 10px;
}

@media (max-width: 1400px) {
	.my-service-section .inner > .bot > img {
		position: absolute;
        top: 120px;
		margin-top: unset;
        width: 147px;
        padding-left: 1rem;
	}
	.my-service-section .tab {
		margin-bottom: 120px;
	}
	.my-service-section > .inner {
		position: relative;
	}
	.my-service-section .bg {
		bottom: unset;
        top: 186px;
        height: 44px;
	}
}

@media (max-width: 1024px) {
	.my-service-section {
	    /* margin-top: 300px; */
	    margin-top: 50px;
	    padding-bottom: 50px;
	}
}



/*공지사항*/
.main-service {}
.main-service .display-content{
	display: flex; 
	gap: 2.3rem; 
	justify-content: space-between;
	
	margin-bottom: 80px;
}
.main-service .display-content > div{
	width: calc(50% - 1.15rem);
}
@media (max-width: 1024px) {
	.main-service .display-content {
	    flex-direction: column;
	}
	
	.main-service .display-content > div{
		width: 100%;
	}
}


.main-service .notice-area{ position: relative; }




.notice-area .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}
.notice-area .top .tit {
    font-family: Pretendard;
    font-weight: 700;
    /* font-size: 32px; */
    font-size: clamp(1.6rem, 4vw, 2rem);
    line-height: 120%;
    color: #1D1D1D;
}
.notice-area .tab-list {
	display: flex; 
	flex-wrap: wrap; 
	gap: 4px;
	margin-bottom: 1rem;
}
.notice-area .tab-list > li {
	display: inline-flex;
	align-items: center;
    width: 32.9%;
}

.notice-area .tab-list .tab-button{
	width: 100%;
	display: flex;
	justify-content: center;
    align-items: center;
    gap: 8px;
	font-size: 18px; 
	font-weight: 400; 
	color: #1D1D1D;
	border: 1px solid #E4E4E4;
	border-radius: 0.6rem;
	padding: 0.9rem 3.1rem;
	background: #fff;
}
.notice-area .tab-list .tab-button.active{
	border: unset;
	color: #fff;
	font-weight: 700;
	background: #3D189B;
}
.notice-area .tab-list .tab-button.active img {
	display: none;
}

.notice-area .tab-cont li > a {
	display: flex; 
	align-items: center; 
    justify-content: space-between;
	gap: 30px; 
	padding: 1rem 1.6rem;
	color: #8a8a8a; 
	background-color: #fff;
	width: 100%;
}
.notice-area .list {
	border-top: 3px solid #2D2D2D;
}

.notice-area li:not(:last-child) a {
	border-bottom: 1px solid #E4E4E4;
}
.notice-area li:last-child a {
	border-bottom: unset;
}


.notice-area .notice_date {
	font-size: 18px; 
	font-weight: 400;
	text-align: center;
	color: #555555;
	width: 130px;
}

.notice-area .notice_tit{
	display: block;
	font-weight: 700; 
	color: #1D1D1D; 
	font-size: 1.2rem;
	 overflow:hidden; 
	 text-overflow:ellipsis; 
	 white-space:nowrap;
	 width: 100%;
}






/*복지서비스 모의계산*/
.welfare-area {
	width: 767px; 
	border-radius: 2rem; 
	padding: 40px 32px 20px; 
	background-color: #F1F4FC;
	position: relative;
	overflow: hidden;
}
.welfare-area:after {
	content: '';
	width: 410px;
	height: 410px;
	display: block;
	
	position: absolute;
    right: -130px;
    bottom: -130px;
	background: url("../../images/main/welfare-list-bg.png") no-repeat center center;
    background-size: contain;
}

.welfare-area .top {
	display: flex;
    align-items: center;
    gap: 16px;
   	margin-bottom: 40px;
}
.welfare-area .top .tit {
	font-family: Pretendard;
	font-weight: 700;
	/* font-size: 32px; */
	font-size: clamp(1.4rem, 4vw, 2rem);
	line-height: 120%;
	color: #1D1D1D;
}
.welfare-area .top .tit span {
	color: #3D189B;
}

.welfare-list{
	width: 100%; 
	height: 100%;
	text-align: center; 
	overflow: hidden;
}
.welfare-list .swiper-wrapper{
	height: 360px; 
	/* gap: 1.4rem; */
}
.welfare-list .swiper-slide {
	height: calc((100% - 120px) / 2) !important;
}
.welfare-list a{
	display: block; 
	width: 100%; 
	height: 100%; 
	text-align: center;
}
.welfare-list a > .imgs {
	width: 100%; 
	max-width: 11.8rem; 
	aspect-ratio: 1/1; 
	background-color: #fff; 
	border-radius: 50%; 
	display: flex; 
    flex-direction: column;
	align-items: center; 
	justify-content: center; 
	margin: 0 auto; 
	transition: 0.3s;
}
.welfare-list a > .imgs img {
	height: 48px;
	width: 48px;
	object-fit: contain;
}

.welfare-list a .imgs span{
	display: block; 
	margin-top: 0.5rem; 
	font-size: 1.1rem; 
	font-weight: 600;
	color: #1D1D1D;
	max-width: 75px;
	
	line-height: 120%;
    letter-spacing: -0.05em;
}


.welfare-list a:focus{outline-offset: -2px;}
.welfare-pagination {
	/* margin-top: 2rem; */
	margin-top: -3rem;
}
.welfare-pagination .swiper-pagination-bullet {
	width: 8px; 
	height: 8px; 
	background-color: #8E8E8E; 
	opacity: 1;
} 
.welfare-pagination .swiper-pagination-bullet-active{
	width: 1.3rem; 
	background-color: #3D189B; 
	border-radius: 7px;
}
.welfare-pagination .swiper-pagination-bullet:focus{
	outline: 1px solid var(--primary); 
	outline-offset: 1px;
}





/* 복지시설 찾기 메인, 서브 공통*/
.main-facility {
	background-color: #F8F8F8; 
	padding:80px 0;
}
.main-facility .inner > .top {
	display: flex;
    justify-content: space-between;
    align-items: center;
   	margin-bottom: 16px;
}
.main-facility .inner > .top > .tit {
	font-family: Pretendard;
	font-weight: 700;
	/* font-size: 32px; */
	font-size: clamp(1.4rem, 4vw, 2rem);
	line-height: 120%;
	color: #1D1D1D;
}
.main-facility .inner > .top > .tit span {
	color: #3D189B;
}



.main-facility .tab {
	display: flex;
	margin-bottom: 40px;
}

.main-facility .tab li a {
	padding: 17px 20px 13px;
	font-weight: 500;
	font-size: 18px;
	cursor: pointer;
	color: #555555;
	border-bottom: 4px solid #1c285700;
}
.main-facility .tab li a.active {
	font-weight: 700;
	color: #1C2857;
	border-color: #1C2857;
} 



.main-facility .flex-title{display: flex; align-items: center; column-gap: 2.6rem; row-gap: 2rem; margin-bottom: 5rem; flex-wrap: wrap;}
.main-facility .display-content{
	display: flex; 
	justify-content: space-between;
	gap: 36px;
	position: relative;
}

.map-area{
	width: calc(100% - (400px + 36px));
}
.map-content{
	width: 100%; 
	height: 520px; 
	border-radius: 1.6rem; 
	overflow: hidden;
	border: 1px solid #E4E4E4;
}
.map-content.sub{width: 100%; height: 960px; border-radius: 1.6rem; overflow: hidden;box-shadow: 2px 4px 12px #00000014;}

.facility-search.main{
	width: 400px;
}
.facility-search .srch-box{border: 1px solid #CCCCCC;border-radius: 3rem; font-size: 1.8rem; overflow: hidden; background-color: #fff; display: flex; align-items: center; justify-content: space-between; margin-bottom: 3.5rem;}
.facility-search .srch-box .faci-srch-btn{background-color: #0059A9; padding:0.8rem 2rem; border-radius: inherit;color: #fff; display: inline-flex; align-items: center; }
.facility-search .srch-box > input{border:0;width: calc(100% - 138px); padding-left: 2rem;}

.facility-search .srch-box .more-btn{display: inline-block; color:#868686; }
.facility-search .srch-box .faci-srch-btn:focus{outline-offset: -3px; outline-color: #fff;}
.facility-search .srch-box > input:hover,.facility-search .srch-box > input:focus{outline:0; border:0;}
.facility-search .srch-box:has(input:focus){border-color: #0059A9;}

.facility-search .faci-list { 
	padding:10px 0;
	height: 520px;
    overflow-y: auto;
    
    display: flex;
    flex-direction: column;
    gap: 10px;

}

.facility-search .faci-list li{
	padding: 24px; 
	gap: 2.6rem;
	border: 1px solid #E4E4E4;
	background: #fff;
	border-radius: 1rem;
    z-index: 1;
}

.facility-search .faci-list li:hover{
	
	border: 1px solid #3D189B;
    transition: all .3s;
    transform: translateY(-2%);
    box-shadow: 0 10px 20px -8px rgba(0, 0, 0, .1);
}

.facility-search .faci-list li .imgs{width: 5.8rem; height: 5.8rem; padding:1.4rem; background-color: #4759C7; border-radius: 1.2rem; display: inline-flex;}
/* .facility-search .faci-list li:last-child{border-bottom: 0;} */
.facility-search .faci-list li > a {
	display: block;   
	color: #717171;
}
.facility-search .faci-list .faci-tit {
	font-size: 1.3em; 
	color: #1D1D1D;
	font-weight: 700; 
	margin-bottom: 4px;
}
.facility-search .faci-list .top {
	display: flex;
	gap: 4px;
	padding-bottom: 12px;
	border-bottom: 1px solid #E4E4E4;
	margin-bottom: 12px;
}
.facility-search .faci-list .top .label {
	padding: 0 8px;
	color: #3D189B;
	border-radius: 4px;
	background: #EFE7F7;
	font-weight: 400;
}

.facility-search .faci-list .bot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.facility-search .faci-list .bot .left {
	width: calc(100% - 20px);
}
.facility-search .faci-list .faci-addr {
	margin-bottom: 4px;
}

.facility-search .faci-list .faci-addr > div {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.facility-search .faci-list .faci-addr,
.facility-search .faci-list .faci-call {

    display: flex;
    align-items: center;
    gap: 10px;
}

.facility-search #faciList {
	position: relative;
}
.facility-search #faciList:after {
	position: absolute;
	content: '';
	width: 182.8px;
	height: 158.21px;
	display: block;
    z-index: 0;
    background: url(../../images/main/welfare-map-bg.png) no-repeat center center;
    right: 30px;
    top: -145px;
}

@media (max-width: 1024px) {
	.main-facility .display-content {
	    flex-direction: column;
	}
	.map-area {
	    width: 100%;
	}
	.facility-search.main {
	    width: 100%;
	}
	
	.facility-search .faci-list {
		height: unset;
		max-height: 520px;
	}
}

/**음성**/
.btn-voice.rec img{
	filter: invert(31%) sepia(100%) saturate(1646%) hue-rotate(335deg) brightness(97%) contrast(105%);
}