/*
    설교보기 페이지
*/
.sermon-search-section {
    _margin-top: clamp(30px, 10vw, 30px);
    transition: margin-top 0.3 ease;
}

@media (max-width: 767.98px) {
    .sermon-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
*/
.sermon_list {
    font-weight:bold;
}
.sermon_list td {
    padding: 19px 0px 19px 0px;
}
.sermon_list .title{
    display: table;
    font-size: 21px;
    padding-top: 3px;
    color: #1D1171;
    letter-spacing: 0px;
    line-height: 22px;
}
.sermon_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;
}
.sermon_list .comment{
    display: table;
    color: #817f7f;
    padding-left: 1px;
    padding-bottom: 4px;
    font-size: 14px;
    font-weight: normal;
    margin-top: 5px;
}
.sermon_list .comment a{
    color: #817f7f;
    letter-spacing: -1px;
    font-weight: normal;
}



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

@media (max-width: 767.98px) {

    .sermon_list {padding:12px 18px 8px 18px;font-size:15px;color:#3A3086;line-height:19px;font-weight:bold;}
    .sermon_list td {padding: 12px 18px 12px 18px;}    
    .sermon_list .title{display:table;font-size:17px;padding-top:3px;color:#1D1171;letter-spacing:0px;line-height:22px;}
    .sermon_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;

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

}