#search, #search_header {
    width : 900px;
    margin : 0 auto;
    font-family:'Malgun Gothic';
    font-weight : bold;
    color : black;
    letter-spacing: -1px;
}

#search{
    margin-bottom: 70px;
}


/* header css 시작 */
/* #search {
    margin : 0 auto 100px auto;
} */

#search_header #search_box {
    margin : 60px 0;
    border : 3px solid #3498db;
    height : 70px;
    display: flex;
    justify-content: space-between;
}

#search_header #search_box input, #search_header #search_box input::placeholder {
    font-size : 28.5px;
    color: #989494;
    width: 100%;
    font-family: 'Malgun Gothic';
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -1.43px;
}

#search_header #search_box input{
   border: none;
   padding-left: 20px;
   color : #4c4c4c;
  }

#search_box input:focus { 
    outline: none; 
}

#search_header #search_btn {
    background-color : #3498db;
    line-height: 70px;
    height : 100%; 
    width : 100px;
    text-align : center;
}

#search_header #search_btn img {
    vertical-align: middle;
    width : 36px;
    height : 36px; 
}

#search_header #search_tab {
    display: flex;
    text-align: center;
    color : black;
    font-size : 20px;
    
}

#search_tab li{
    position: relative;
    width : 225px;
    margin : 16px 0;
}

#search_tab li::before {
    transform: translateX(-50%);
    position: absolute;
    background: #cbe1ef;
    bottom: -16px;
    height: 3px;
    content: '';
    width: 225px;
    left: 50%;
}

#search_tab .active {
    position: relative;
    color : black;
}

#search_tab .active::before {
    transform: translateX(-50%);
    position: absolute;
    background: #1d398d;
    bottom: -16px;
    height: 3px;
    content: '';
    width: 225px;
    left: 50%;
}

/* header css 끝 */

#clip_section, #program_section, #news_section , #sermon_section {
    margin : 40px 0;
}

#search .title {
    display :flex;
    justify-content: space-between;
    font-size : 20px;
    margin-bottom : 26px;
}

#search .title .count {
    color : #00aeef;
}

#search .clip_list, #search .news_list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 47px 17px;
}

#search .clip_list .clip_one, #search .news_list .news_one {
    width : 289px;
}

#search .clip_list .clip_one img, #search .news_list .news_one img {
    width : 289px;
    height : 162px;
}

#search .program_list, #search .sermon_list {
    display: flex;
    flex-wrap: wrap;
}


#search .program_list .program_one  {
    width : 118px;
    margin-left: 38px;
    margin-bottom: 20px;
}

#search .sermon_list .sermon_one {
    width : 152px;
    margin-left: 34px;
    margin-bottom: 20px;
}

#search .program_list .program_one img, #search .sermon_list .sermon_one img {
    width : 100%;
}

#search .clip_title, #search .sermon_title {
    margin-top : 12px;
    font-size : 15px;
    color : #333333;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

#search .program_title, #search .news_title {
    margin-top : 12px;
    font-size : 15px;
    color : #333333;
    line-height : 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

#search .clip_sub_title, #search .sermon_sub_title {
    margin-top: 5px;
    font-size : 13px;
    color : #939393;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

#search .more {
    font-size : 15px;
}

#search .more img {
    width : 10px;
    height : 10px;
}

#more_btn {
    margin-bottom : 100px; 
    width: 180px; 
    margin: 0 auto; 
    margin-bottom: 50px;
    cursor: pointer;
}

#loader {
    border : 8px solid #f3f3f3;
    border-top : 8px solid #3498db;
    border-radius: 50%;
    width : 50px;
    height : 50px;
    animation : spin 2s linear infinite;
    margin: 50px auto;
}
@keyframes spin {
    0% { transform: rotate(0deg);}
    100% { transform: rotate(360deg);}
}

/* 검색 결과 없을 경우 */
.no_result {
    padding: 30px 20px;
    margin: 0 auto;
    max-width: 400px;
    margin-top: 20px;
    margin-bottom: 40px;
}

.search_recommend{
    padding : 15px;
    font-size : 1.5rem;
    color : rgb(28, 56, 141);
    margin-bottom: 15px;
}

#search .search_result {
    padding : 20px 20px;
    border-bottom : 1px solid #f0f0f0;
    color : black;
    font-size: 17px;
}

