/* Mobile Device */
/* 768px 미만 해상도의 모바일 기기를 위한 코드를 작성한다. 모든 해상도에서 이 코드가 실행됨. 미디어 쿼리를 지원하지 않는 모바일 기기를 위해 미디어 쿼리 구문을 사용하지 않는다.*/
@media all and (max-width:500px) {
		
	.news-info{
		     display: flex;
	    width: 100%;
	    padding: 6px 12px 6px 12px;
	    border-bottom: 1px solid #ece2e2;
	    	
	}
		
	.news-info-num{
		    font-size: 17.5px;
	    font-weight: bold;
	
	}
	.news-info-text{
		margin-left: 16px;
		    width: 95%;
	}
	
	
	.news-info-title{
		font-size: 17.5px;
	    font-weight: bold;
	}
	.news-info-date{
		    font-size: 16px;
	    margin-bottom: 8px;
	    display:block;
	    overflow:hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	    width: 95%;
	
	}
	#search_text{
		width: 70%;
	
  	  padding-right: 19%;
	}
	#search_btn{
	   right: 6%;
    top: 58%;

	}
}

/* All Device */
/* 모든 해상도를 위한 공통 코드를 작성한다. 모든 해상도에서 이 코드가 실행됨.*/

/* Tablet Device */
@media all and (min-width:500px) and (max-width:1023px) {
	/*  사용자 해상도가 768px 이상이고 1024px 이하일 때 이 코드가 실행됨. 아이패드 또는 비교적 작은 해상도의 랩탑이나 데스크톱에 대응하는 코드를 작성한다.*/
	.news-info{
		     display: flex;
	    width: 100%;
	   padding: 6px 12px 6px 12px;
	    border-bottom: 1px solid #ece2e2;
	    	
	}
	
		
	.news-info-num{
		    font-size: 18px;
	    font-weight: bold;
	
	}
	.news-info-text{
		margin-left: 13px;
		    width: 95%;
	}
	
	
	.news-info-title{
		    font-size: 18px;
	    font-weight: bold;
	}
	.news-info-date{
		    font-size: 16px;
	    margin-bottom: 8px;
	    display:block;
	    overflow:hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	    width: 95%;
	
	}

	#search_text{
	width: 60%;

    padding-right: 14%;
	}
	
	#search_btn{
	   right: 14%;
    top: 58%;

	}
}

/* Desktop Device */
@media all and (min-width:1024px) {
	/*  사용자 해상도가 1025px 이상일 때 이 코드가 실행됨. 1025px 이상의 랩탑 또는 데스크톱에 대응하는 코드를 작성한다.*/

    .news-info{
	 	display: flex;
	    width: 100%;
	    padding: 5px 25px 5px 25px;
	    /* margin: auto; */
	    border-bottom: 1px solid #ece2e2;
	    	
	}
	
	.news-info-num{
		    font-size: 18px;
	    font-weight: bold;
	
	}
	.news-info-text{
		    margin-left: 20px;
	    width: 100%;
	}
		   
	   
	.news-info-title{
		   font-size: 18px;
	    font-weight: bold;
	}
	.news-info-date{
		     font-size: 16px;
	    margin-bottom: 8px;
	    display: block;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	    width: 95%;
	
	} 
	#search_text{

 	width: 50%;
	
    padding-right: 6%;
}
	
	#search_btn{
	   right: 22%;
    top: 58%;

	}
	
}



#search_btn{
	    width: 29px;
    height: 29px;
    position: absolute;
 
}
.search_news{
	display: block;
    position: relative;
 	width: 70%;
    text-align: center;
    margin: auto;
    padding-top: 40px;
	
}

#search_text{
	 margin: auto;
	height: 30px;
    height: 32px;
    font-size: 16px;
    border: 0;
    outline: 1px solid rgb(233, 233, 233);
    padding-left: 2%;
    border-radius: 5px;
}