/*호별보기*/
li{
    list-style-type: none;
  }
  
  /* 보여줄 구간의 높이와 넓이 설정 */
  #slideShow{
    width: 320px;
    height: 50px;
    position: relative;
    margin: 15px auto;
    overflow: hidden;   
    /*리스트 형식으로 이미지를 일렬로 
    정렬할 것이기 때문에, 500px 밖으로 튀어 나간 이미지들은
    hidden으로 숨겨줘야됨*/
  }
  
  
  .slides{
    position: absolute;
    left: 0;
    top: 10px;
    width: 20px; /* 슬라이드할 사진과 마진 총 넓이 */
    transition: left 0.5s ease-out; 
    /*ease-out: 처음에는 느렸다가 점점 빨라짐*/
    padding-right: 0px;
  }
  
  /* 첫 번째 슬라이드 가운데에 정렬하기위해
  첫번째 슬라이드만 margin-left조정 */
  .slides li:first-child{
    margin-left: 50px;
  }
  
  
  /* 슬라이드들 옆으로 정렬 */
  .slides li:not(:last-child){
    float: left;
    margin-right: 68px;
  }
  
  .slides li{
    float: left;
    font-size:1.4rem;
    font-weight:bold;
  }
  
  .controller span{
    position:absolute;
    background-color: transparent;
    color: black;
    text-align: center;
    border-radius: 50%;
    padding: 10px 25px;
    top: 0%;
    font-size: 1.3em;
    cursor: pointer;
    margin-right: 10px;
  }
  
  /* 이전, 다음 화살표에 마우스 커서가 올라가 있을때 */
  .controller span:hover{
    background-color: rgba(128, 128, 128, 0.11);
  }
  
  .prev{
    left: 0px;
  }
  
  /* 이전 화살표에 마우스 커서가 올라가 있을때 
  이전 화살표가 살짝 왼쪽으로 이동하는 효과*/
  .prev:hover{
    transform: translateX(-10px);
  }
  
  .next{
    right: -10px;
  }
  
  /* 다음 화살표에 마우스 커서가 올라가 있을때 
  이전 화살표가 살짝 오른쪽으로 이동하는 효과*/
  .next:hover{
    transform: translateX(10px);
  }
  /* 호별보기 끝 */

.wrap{    width: calc(100%);max-width: 860px;
  margin: 0 auto;}
  .page_content{padding-top:10rem;  text-align:left; padding-left: 20%;}

.top_title p{font-size: 2.3rem; font-weight:500;}
.top_title font{color:#373737; font-size:0.7em;}
.top_title hr{color:#666}
.nav_menu{margin-bottom: 8rem;margin: 1.5rem 15rem 0 0px; text-align:center;}
.nav_menu span{margin: 0 1rem 1rem 0; width: 135px; height: auto; border: 2px solid #e59d00;border-radius: 30px; float:left; cursor:pointer; font-size: 1.3rem;}
.sum_list{width:100%;background-color:#fff;margin:30px auto; text-align:left;    max-width: 860px;}
.sum_list ul{display: flex;    align-items: stretch;gap: 3em;justify-content: space-between;}
.sum_list ul p {}
.height_margin{width:100px;height:10px;}
.li_left img{width:100%;height:auto;}
.li_left{width: 45%;  max-width: 500px;}
.li_right{ width:60%;display: flex;flex-direction: column;justify-content: space-between;border-bottom: 1px solid;}
.sp1{color:#373737;font-size: 1.5rem;font-weight: bold;}
.sp2{color:#373737;font-size: 1.2rem;    padding-top: 1em;    line-height: 1.5em;padding-bottom: 1em;}
.sp3{color:#373737;font-size: 1.0rem;margin-top: auto;text-align: right;line-height: 1.2;}


.content.search_list .on_air.sum_list ul li a .sp1{font-size: 1.2rem;}
  .content.search_list .on_air.sum_list ul li a img{    margin: 1em 0;}
@media screen and (max-width: 887px){
	.wrap{width:100%;}
	.page_content{padding-top:10rem; text-align:left; padding-left: 0%;}
	.top_title hr{width:100%}
	.nav_menu{margin-bottom: 8rem;margin: 1.5rem 15rem 0 0px; text-align:center;width:100%;}
	.height_margin{width:100px;height:30px;}
	.nav_menu span{margin: 0 0.5rem 0.5rem 0; width: 29%; height: 26px; border: 1px solid #e59d00;border-radius: 30px; float:left; cursor:pointer; font-size: 1.3rem; line-height:2.5rem;}
	.sum_list{width:98%; min-height: 100px;}
  .sum_list ul{gap: 1em;}
 
	section{width:100%;}
	.li_left{width:48%;}
	.li_left img{width:100%;height:auto; float:left;}
  .content.search_list .on_air.sum_list ul{flex-direction: column;}
  .content.search_list .on_air.sum_list ul .li_left{        width: 100%;}
	.li_right{width:45%; float:right; line-height: 0.8;}
	.sp1{   margin-top: 0px;    line-height: 1.2;letter-spacing: -1px;font-size: 0.9rem;}
	.sp2{display: none;}
	.sp3{font-size: 0.8rem;}
    
/* 보여줄 구간의 높이와 넓이 설정 */
#slideShow{
    width: 300px;
    height: 50px;
    position: relative;
    margin: 25px auto;
    overflow: hidden;   
    /*리스트 형식으로 이미지를 일렬로 
    정렬할 것이기 때문에, 500px 밖으로 튀어 나간 이미지들은
    hidden으로 숨겨줘야됨*/
  }
  
  
  /* 첫 번째 슬라이드 가운데에 정렬하기위해
  첫번째 슬라이드만 margin-left조정 */
  .slides li:first-child{
    margin-left: 50px;
  }
  
  
  /* 슬라이드들 옆으로 정렬 */
  .slides{    top: 3px;}
  .slides li:not(:last-child){
    float: left;
    margin-right:63px;
   
  }
  /*슬라이드 조금 아래로*/
  .slides li { margin-top: 5px;}
}