/*
    프로그램 페이지
*/
.search-section {
    _margin-top: clamp(30px, 10vw, 30px);
    transition: margin-top 0.3 ease;
}

@media (max-width: 767.98px) {
    .search-section {
        margin-top: 0;
        transition: margin-top 0.3 ease;
    }
}


/* 공통 스타일 */
/* ui.css에도 같은 이름으로 있는데 가로폭이 페이지마다 달라지거나 디자인이 변경될 수 있어서 별도로 또 만듦 */
.category-title {
    color: #9b9c9c;
    font-size: 18px;
    text-align: left;
    margin-bottom: 20px;
    background-color: transparent;
    padding: 0px 15px 10px 2px;
    margin: 30px 0 10px 0; 
 
}

/* 모바일: 전체 너비, 회색 배경, 흰색 또는 진한 텍스트 */
@media (max-width: 767.98px) {
    .category-title {
        display: block;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        margin: 0;
        background-color: #EBEEF3;
        color: #535A5E;
        font-size: 16px;
        padding: 10px 15px 10px 15px;
    }
}


/* 
    Media Wrap
*/
#MediaWrap {position:relative;margin:0;background-color:#fff;}
#MediaWrap .media_container {
    display: block;
    width: 100%;
    height: auto;
    z-index: 1;
}
#MediaWrap .media_info {
    position: relative;
    padding: 27px 20px 73px 0px; /* 왼족 여백 없도록 수정, 화면 작아지면 왼쪽여백 생김 */
    font-size: 13px;
} 
#MediaWrap .media_info .media_title {
    display: grid;
    font-size: 23px;
    color: #464B4F;
    font-weight: bold;
    line-height: 27px;
    width: 92%;
    padding: 0 12px 4px 0;
}
#MediaWrap .media_info .media_subtitle {
    display: table;
    font-size: 18px;
    color: #464B4F;
    letter-spacing: -1px;
    padding: 0 27px 6px 0;
}
#MediaWrap .media_info .media_txt {
    display: table;
    font-size: 17px;
    color: #9a9b9c;
    padding: 0 0 14px 0;
}
#MediaWrap .media_info .button_wrap {padding:7px 0 0 0;}
#MediaWrap .media_info .button_wrap a > span {
    display: inline-block;
    width: 65px;
    height: 34px;
    line-height: 30px;
    text-align: center;
    margin: 8px 2px 0 0;
}
#MediaWrap .media_info .button_wrap a > span {border:1px solid #B0B0B0;color:#6B6B6B;font-size:15px;font-weight:bold;}
#MediaWrap .media_info .share {position:absolute;top:21px;right:20px;}
#MediaWrap .media_info .share img {width:18px;}

.btn_gray {background-color:#fff;opacity:0.45;filter:alpha(opacity:45); }
.btn_sel {background-color:#cad2d4;}



/* 모바일: 세로 정렬 + 왼쪽 정렬 */
@media (max-width: 991.98px) {
    .category-title {padding-left: 10px;}
    .container {
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    #MediaWrap .media_info {
        padding: 27px 0px 45px 10px;
    }
}    


/* 모바일: 세로 정렬 + 왼쪽 정렬 */
@media (max-width: 767.98px) {
    .category-title {margin-bottom: 0px;}

    #MediaWrap .media_info {
        margin: 0 5px;
        padding: 27px 0px 45px 10px;
    }

    #MediaWrap .media_info .media_title {font-size:18px;line-height:23px;padding:0 12px 5px 0;}
    #MediaWrap .media_info .media_subtitle {font-size:15px;padding:0 27px 3px 0;}
    #MediaWrap .media_info .media_txt {font-size:14px;padding:0 0 3px 0;}
}



/*
    부드럽게 전환
*/
#MediaWrap .media_container video {
    transition: width 0.3s ease, height 0.3s ease;
}

.video-js {
    transition: all 0.3s ease;
}

.container,
#MediaWrap .media_container {
    transition: all 0.3s ease;
}



/*
    divider
*/
.full-width-divider {
    margin: 0;
    border: none;
    border-top: 2px solid #70727C;
    height: 12px;
    background-color: #C7CADC;
}

@media (max-width: 767.98px) {
    .full-width-divider {
        height: 6px;
    }
}




/*
    sermon list
*/
.vod_list {
    font-weight:bold;
}
.vod_list td {
    padding: 19px 0px 19px 0px;
}

.vod_list .thumb {
  width: 240px;       /* 원하는 최대 너비 */
  height: auto;       /* 원하는 최대 높이 */
  flex-shrink: 0;     /* 줄어들지 않도록 */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;   /* 넘치는 부분 가림 */
  border-radius: 0px;
  _border: 1px solid #bab9be;

  transition: all 0.3s ease;
}

.vod_list .thumb-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* 원본 비율 유지 */

  transition: transform 0.3s ease; /* 부드러운 전환 */
}

.vod_list .thumb:hover .thumb-img {
    transform: scale(1.1); /* 살짝 확대 (5%) */
}

.vod_list .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 0;
}
.vod_list .title{
    display: table;
    font-size: 21px;
    padding-top: 3px;
    padding-left: 0;
    color: #110a44;
    letter-spacing: 0px;
    line-height: 22px;
}

.vod_list .subtitle {
    display: table;
    color: #8C8C8C;
    padding-top: 10px;
    padding-bottom: 5px;
    font-size: 15px;
    line-height: 15px;

	height:auto;
	text-overflow:ellipsis; 
	overflow: hidden;
	-webkit-line-clamp:2;
	line-clamp:2;
	-webkit-box-orient:vertical;
	display: -webkit-box;
	display: -moz-box;
	word-wrap:break-word;
	-webkit-box-orient: vertical;
}
.vod_list .comment{
    display: table;
    color: #817f7f;
    padding-left: 1px;
    padding-bottom: 4px;
    font-size: 14px;
    font-weight: normal;
    margin-top: 5px;
}
.vod_list .comment a{
    color: #817f7f;
    letter-spacing: -1px;
    font-weight: normal;
}



@media (max-width: 991.98px) {
    .vod_list td {
        padding: 19px 13px 19px 13px;
    }
}

@media (max-width: 767.98px) {

    .vod_list .thumb {
        width: 120px;
        height: auto;
    }

    .vod_list {padding:12px 18px 8px 18px;font-size:15px;color:#3A3086;line-height:19px;font-weight:bold;}
    .vod_list td {padding: 12px 18px 12px 18px;}    
    .vod_list .title{display:table;font-size:17px;padding-top:3px;color:#1D1171;letter-spacing:0px;line-height:22px;}
    .vod_list .subtitle {display:table;color: #8C8C8C;padding-top:6px;font-size:14px;line-height:15px;letter-spacing:0px;

        height:auto;
        text-overflow:ellipsis; 
        overflow: hidden;
        -webkit-line-clamp:2;
        line-clamp:2;
        -webkit-box-orient:vertical;
        display: -webkit-box;
        display: -moz-box;
        word-wrap:break-word;
        -webkit-box-orient: vertical;

    }
    .vod_list .comment{display:table;color:#818080;padding-top:6px;padding-left:1px;padding-bottom:4px;font-size:14px;font-weight:normal;}
    .vod_list .comment a{color:#818080;letter-spacing:-1px;font-weight:normal;}

}



/* world mission tab */
.worldmission_tab_main {clear:both;position:relative;padding:0;margin:0;}
.worldmission_tab_main .head_tab_in {display:block;_display:flex;width:100%;height:42px;text-align:center;margin:30px 0 0 14px;}
.worldmission_tab_main .head_tab_in a {color:#4e4e4e;font-size:15px;font-weight:bold;line-height:32px;}
.worldmission_tab_main .head_tab_in .swiper-wrapper > div {margin:0 0px;padding:1px 0 0 0;box-sizing:border-box;border:1px solid #c9cccc;-webkit-border-radius:6px;border-radius:6px;text-decoration:none;box-shadow:rgba(153, 153, 153, 0.2) 1px 2px 5px;}

.btn_sky {color:#fff;background-color:#6896A6;}
.btn_sky a span{color:#fff;}