'sm': '640px' // @media (min-width: 640px)
'md': '768px' // @media (min-width: 768px)
'lg': '1024px' // @media (min-width: 1024px)
'xl': '1280px' // @media (min-width: 1280px)
'2xl': '1536px' // @media (min-width: 1536px)

@media (max-width:767px){.pc-view{display:none;}	}
@media (min-width:768px) {.mobile-view{display:none ;} }

	}

.margin-auto{margin:0 auto;}

/*   리스안의 작음 묶음 */
.list-small-group{	
	background-color:#fcfdfe;
	border:1px solid #f1f3f4;
	border-radius:8px; 
	padding:20px;
	margin-bottom:8px ;
	font-size:0.8em; 
}
	@media (max-width:640px){	
	.list-small-group{	
		padding:1rem;
	}
}


/*    사진 그림자 */
.sh{box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}

.Division{margin-bottom:60px; }

/*    제목 폰트 꾸미기 */
.leaf{color:#0071c2;}
.leaf:before{ 
	background: url(/html/img/leaf.svg) no-repeat;  
	/* background-color:red;  */
    content: "";
    display: inline-block;
    height: 12px;
    width: 20px;  
	margin-right:8px;
	}
	
@media (max-width:640px){	.leaf:before{height: 12px;	width: 20px; }		}
@media (max-width:479px){	.leaf:before{display:none; }		}



@media (max-width:766px){
	.group{
		margin-bottom:30px; 
		}
}

@media (min-width:1024px){
	.group img{width: 80%; margin: 40px 0 0 54px;}
}

/*  모바일 그룹 디자인 */
@media (max-width:767px){
	.m-group_container{
		padding:2rem 1rem 3rem 1rem;
		background-color:var(--first-color);
		}
	.m-group{
		border:1px solid var(--gray-300);
		border-radius:4px;
		padding:2rem 1rem ;
		background-color:#fff;
		}
}


/*   들여쓰기 상세 내용 */
.bunddle{	margin-left:20px;	}
@media (max-width:1280px){.bunddle{margin-left:0;}}


/*    리스트 아이콘 동그라미 노출 */
.list-icon-circle{   margin-left: 26px; 	text-indent: -26px;} 


@media(min-width:480px){
.list-icon-circle:before{
	content: "";
    background: url(/html/img/list-icon-circle.png) no-repeat;  
	background-position: 4px 3px;
    display: inline-block;
	height: 16px;
    width:18px;    
	margin-right:8px;
	}	}
@media(max-width:479px){
	.list-icon-circle:before{
						content: "-";
						height: 6px;
						width:8px;    
						margin-right:4px;	}	
	.list-icon-circle{
		font-size:13px;
		margin-left: 11px; /* 1 */
	text-indent: -11px; /* 2 */}
}

/*    Tab   */
.tabs_container {
  margin-top: 150px;
  padding-bottom: 40px;
  width: 100%;
  margin: 0 auto;
}
.tab_item{
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-weight: 500;
}
	@media(max-width:766px){
		.tab_item{		  font-size: 14px;}
		}

/*    Table   */

.Table_container{overflow-x:auto;}
 .Table{
	width:100%;
	min-width:480px;
	background-color:var(--table-bg-color);
	}
.Table thead{
	background-color:var(--table-head-color);
	padding:12px 0;
	}

.Table tr{
	border-bottom:1px solid var(--table-border-color);
	padding:40px; 
	}




/*    다운로드 버튼   */
.down_btn button{
    background: var(--one-color);
    font-size: 14px;
    color: #fff;
    cursor: pointer;
    padding: 8px 26px;
	margin-left: 30px;
    line-height: 15px;
    border-radius:6px;
    border:none;
    letter-spacing:0px;
}
.down_btn button:hover{box-shadow:1px 1px 4px rgba(0,0,0,0.4);}


/*************************************************************************************
 ********
 ********   인 사 말
 ********
 ************************************************************************************/

.greeting p{margin-bottom:2rem;}

.greeting-picture{width:100%; height:auto;}

@media(max-width:640x){
	.greeting-picture{
		position: absolute;
		clip: rect( 100px, 300px, 300px, 0);
		}
}



/*************************************************************************************
 ********
 ********   연 혁 
 ********
 ************************************************************************************/
.history-list {margin-left:-16px; }
@media (max-width:767px){
.history-list {margin-left:0; }

}
@media (min-width:1441px){
	.historyTab_1, .historyTab_2, .historyTab_3{
		background:url(/html/images/history-bg1200.jpg ) no-repeat fixed  left center; 
	}
}

@media (min-width:1200px) and (max-width:1440px){
	.historyTab_1, .historyTab_2, .historyTab_3{
	background:url(/html/images/history-bg1200-2.jpg ) no-repeat fixed  left center; 
	}
}

@media (min-width:768px) and (max-width:1199px) {
	.historyTab_1, .historyTab_2, .historyTab_3{
	background:url(/html/images/history-bg.jpg ) no-repeat fixed  left center; 
	}
}


/*************************************************************************************
 ********
 ********   조   직    도 
 ********
 ************************************************************************************/
 .organization-img_container{width:100%;}
 .organization-img{
	max-width:800px;
	height:auto;
	margin:0 auto;
	}
		@media (max-width:766px) {
			 .organization-img_container{padding-right:16px;}
			 .organization-img{
				width:100%;
				height:auto; 
			}		
		}
.organization-name{min-width:80px; }
.organization-class{	
	min-width:80px;
	text-align:center;
	border-left:1px solid var(--table-border-color);
	border-right:1px solid var(--table-border-color);
	}
.job-container{padding:20px 0 20px 8px; }
	@media (min-width:768px) {
		.job-container{margin-left:10%; }
		}

.job{	margin-left:8px;}
.job:before{	content: ".";    display: inline-block;    height: 8px;    width: 12px;}


/*************************************************************************************
 ********
 ********   회  원  안  내 
 ********
 ************************************************************************************/
 .Imwon_container, .Member_container{max-width:800px; margin:0 auto;}
.Imwon, .Member{width:800px; overflow-x:auto; white-space:nowrap; }

.Imwon tbody td:nth-child(1){width:24%; min-width:7rem; text-align:center;}
.Imwon tbody td:nth-child(2){width:30%; min-width:5rem; text-align:center;}
.Imwon tbody td:nth-child(3){width:46%; min-width:16rem; text-align:center;}
	@media(max-width:1279px){	.Imwon {width:800px; margin-left:0; }	}
	@media(max-width:1079px){	.Imwon {width:700px; margin:0 10px;}	}
	@media(min-width:767px)and (max-width:1023px){	
		.Imwon {width:90%; margin:0 auto;  padding-left:0; }	
		.Imwon tbody td:nth-child(1){width:20%; }	
		.Imwon tbody td:nth-child(2){width:20%;}
		.Imwon tbody td:nth-child(3){width:60%;}		
		}
	@media(max-width:766px)  {
		.Imwon {width:96%; margin:0 auto;  padding-left:0; }	
		.Imwon tbody td:nth-child(3) {text-align:left; padding-left:1rem;  }		
		}
	@media(max-width:479px)  {
		.Imwon-container{max-width:479px: padding:0 1rem;}
		.Imwon {width:100%; padding-left:0; }	
		.Imwon tbody td:nth-child(1){ width:100px; }	
		.Imwon tbody td:nth-child(2){ width:100px;}
		.Imwon tbody td:nth-child(3){ width:200px;}	
		}


	.Member{font-size:15px; }			}
	@media(max-width:766px){
		.Member {margin:0 1rem;  }
		.Imwon tbody td:nth-child(1){min-width:20%; text-align:center; }	
		.Imwon tbody td:nth-child(2){width:20%; text-align:center;}
		.Imwon tbody td:nth-child(3){width:60%; text-align:center;}		
	
	}
.Member thead th, .Imwon thead th{
	background-color:var(--table-head-color);
	padding:12px 0;
	}
@media(max-width:766px){	.Member thead th, .Imwon thead th{	background-color:#fff;}}


.Member tbody td, .Imwon tbody td{
	padding:12px 0;
	border:1px solid var(--table-border-color); 
	}

.Member tbody tr, .Imwon tbody tr{
	background-color:var(--table-bg-color);
	padding:12px 0;
	border:1px solid var(--table-border-color); 
	}
.Member tbody tr:nth-child(odd), .Imwon tbody tr:nth-child(odd){
	background-color:var(--table-bg-color);
	}
.Member tbody tr:nth-child(even), .Imwon tbody tr:nth-child(even){
	background-color:#fefdfd;
	}
.Member tbody tr:hover, .Imwon tbody tr:hover{background-color:#dce3e9;}
.Member tbody td:nth-child(1){width:50%; text-align:center; }
.Member tbody td:nth-child(2){width:24%; text-align:center;}
.Member tbody td:nth-child(3){width:26%; text-align:center;}

@media(max-width:1279px){
 .Member {margin-left:0;  font-size:16px; }
}
@media(max-width:1023px){
	.Member {font-size:16px; color:blue;} 
	.Member tbody td:nth-child(1){padding-left:1rem;  }
	}
@media(max-width:766px)	{
	.Member {max-width:100%; font-size:14px; color:red;} 
	.Member tbody td:nth-child(1){min-width:250px; text-align:left; }
	.Member tbody td:nth-child(2){min-width:90px; text-align:center;}
	.Member tbody td:nth-child(3){min-width:50px; text-align:center;}	
	.Member tbody td, .Imwon tbody td{background-color:#ffffff;}
	}

/*************************************************************************************
 ********
 ********   오 시 는 길 
 ********
 ************************************************************************************/
 .map-logo{}

 .map-icon{display:inline-block; width:48px; height:48px; border-radius:50%;}
.icon-location{background:url(/common/images/icon-location.svg ) no-repeat center center; background-size: 36px;}
.icon-telephone{background:url(/common/images/icon-telephone.svg ) no-repeat center center; background-size: 36px;}
.icon-fax{background:url(/common/images/icon-fax.svg ) no-repeat center center; background-size: 36px;}
 @media (max-width: 639px){ .map-icon{ width:32px; height:32px;background-size: 20px; }  }

/*************************************************************************************
 ********
 ********   후 원 안 내 
 ********
 ************************************************************************************/

.support-icon{
	background-color:var(--table-bg-color);
	border:1px solid #d1d1d1;
	border-radius:50%;
	width:92px;
	height:92px;
	margin-right:28px; 
}
 @media (max-width: 639px){	 .support-icon{width:60px; 	height:60px; 	margin-right:28px; }  }
.support-head{height:250px;
	background:url(/html/img/support-img.png) no-repeat bottom ;	 
	}
.support{
	width:90%;
	border-bottom:1px solid #d1d1d1;
	margin-bottom:32px; 
	padding-bottom:32px;
}

.support-text-box{
	flex: 1 0 0;
}


/*     후원종류    아이콘       */
.support-icon    {  background-size: 70px;  }
.support-bank   {  background-image: url(/html/img/support-icon01.svg); background-repeat: no-repeat; background-position: center center; background-size: 70%;}
.support-coin    {  background-image: url(/html/img/support-icon02.svg); background-repeat: no-repeat; background-position: center center; background-size: 70%;}
.support-desital{  background-image: url(/html/img/support-icon03.svg); background-repeat: no-repeat; background-position: center center; background-size: 70%;}
.support-food    {  background-image: url(/html/img/support-icon04.svg); background-repeat: no-repeat; background-position: center center; background-size: 70%;}



/*************************************************************************************
 ********
 ********  회 원 시 설 현 황 
 ********
 ************************************************************************************/


		
/*     노 숙 인    */
 .homeless-title{font-size:1.5rem; font-weight:600;color:#006db9;}
.homeless-table{width:850px;  margin:0 0 80px 5%;}
.homeless-table thead{border-top:2px solid var(--gray-color); border-bottom:2px solid var(--gray-color);  }
.homeless-table thead tr td{ padding:12px 0; text-align:center; background-color:var(--gray-100) }
.homeless-table tbody{ border-bottom:1px solid var(--gray-300);  }
.homeless-table tbody tr{border-bottom:1px solid var(--gray-400);  background-color:var(--gray-50);}
.homeless-table tbody tr:hover{background-color:var(--gray-100);   }
.homeless-table tbody tr td{padding:0.7rem 0; font-size:15px;   }
.homeless-table tbody tr td:nth-child(1){width:33%; padding-left:2rem ;   }
.homeless-table tbody tr td:nth-child(2){width:25%;  text-align:center; }
.homeless-table tbody tr td:nth-child(3){width:42%;   }

 @media (max-width: 1279px){    
.homeless-table{max-width:700px;  margin-bottom:60px; margin:0 auto;}
.homeless-table thead tr td{ padding:12px 0; }
.homeless-table tbody tr td{padding:0.7rem 0; font-size:14px;   }
.homeless-table tbody tr td:nth-child(1){width:35%; padding-left:1rem; }
.homeless-table tbody tr td:nth-child(2){width:20%;    }
.homeless-table tbody tr td:nth-child(3){width:44%;    }
  }

  @media (max-width: 767px){    
.homeless-table{width:100%;  min-width:600px; margin-bottom:60px; margin:0 1rem;}
.homeless-table thead tr td{ padding:12px 0; }
.homeless-table tbody tr td{padding:0.7rem 0; font-size:14px;   }
.homeless-table tbody tr td:nth-child(1){padding-left:1rem; }
.homeless-table tbody tr td:nth-child(2){    }
.homeless-table tbody tr td:nth-child(3){padding: 0 1rem;   }
  }

/*************************************************************************************
 ********
 ********   주 민 도 움 센 터 
 ********
 ************************************************************************************/
  @media (max-width: 640px){ .service-list{display:flex; } }

/*  서비스신청방법 화살표 */
 .service-arrow_container li{margin-left:2rem;list-style-type: decimal;}
 @media (min-width: 641px){
	.service-arrow_container{position:relative; }
	.service-arrow_container li{height:72px; width:26%; color:#fff; margin-left:0; display:flex;   	align-items: center; 	justify-content: center; clip-path: polygon(88% 0%, 100% 50%, 88% 100%, 0% 100%, 12% 50%, 0% 0%);}
	.service-arrow_container li:nth-child(1){background-color:#92d343;}
	.service-arrow_container li:nth-child(2){position:absolute; z-index:1;left:24%; background-color:#43d3a1;}
	.service-arrow_container li:nth-child(3){position:absolute; z-index:1;left:48%;background-color:#40d4e2;}
	.service-arrow_container li:nth-child(4){position:absolute; z-index:1;left:72%;background-color:#40a7e0;}
	}

/* 서비스 이용  테이블  */
.service_container{width: 100%; border:1px solid #ccc;  text-align:center; }
.service_container  thead{border-top:2px solid red;  border:1px solid #ccc; background-color:#eff8fb;}
.service_container th{padding: 10px 0; border:1px solid #ccc; }
.service_container td{padding: 20px 0; border:1px solid #ccc; vertical-align:center;  }
.service_container th:last-child{ border-right:1px solid #fff; }
.service_container th:first-child{ border-left:1px solid #fff; }
.service_container td:last-child{ border-right:1px solid #fff; }
.service_container td:first-child{ border-left:1px solid #fff; }


/*************************************************************************************
 ********
 ********   사 업 안 내
 ********
 ***********************************************************************************/
 
 /*   협의회 고유사업  */
.center-info{display:flex; }
.bg-back{
	display:flex; flex-direction: column; align-items: center; 
	width:72px; min-width:120px;height:32px; background-color:#244478; 
	color:#fff; font-size:14px; font-weight:600; text-align: center; 
	letter-spacing:4px;  border-radius:20px;
 padding:4px 0 7px 6px; margin:0 12px 8px 8px;  }


 /*   좋은 이웃들   */
.detail-list_container{
	padding-left:4px;
}
.detail-list:before{
	content:'·';
	clear:both;
	display:inline-block;
	width:12px;
}



/******   협 의 회 자 체 사 업 *************/
.business-table td{padding: 10px; vertical-align: middle;}
.business-year{min-width: 110px; text-align: center;}
.business-prize{	
	min-width:80px;
	text-align:center;
	border-left:1px solid var(--table-border-color);
	border-right:1px solid var(--table-border-color);
}
.business-canter{border-right:1px solid var(--table-border-color); width: 20%;}
.business-sbtitle, .business-title{display: block;}


 @media (max-width: 640px){

  /*   협의회 고유사업  */
	.center-info{font-size:14px; }
	.bg-back{width:48px; min-width:50px;height:28px; padding: 2px  0 4px 4px; margin:0 12px 8px 0;  border-radius:20px; font-size:13px !important;  letter-spacing:4px;}


 /*   좋은 이웃들   */
 .detail-list_container{
	padding-left:2px;
}
	.detail-list{
		font-size:13px; 
		text-indent: -10px;
        margin-left: 8px;
		}

	.detail-list:before{
	margin-left:4px;
		width:4px;
	 	}
	}