/* Extracted from <style> blocks */
/* ========================================
   통합검색 페이지 스타일 정의
   ======================================== */

/* ========================================
   섹션 래퍼 스타일 - main_sec cont03 방식 적용
   ======================================== */
#footer_wrap {
	position : relative;
}
#wrapper{padding-bottom:0rem;}

.main_sec{
    position: relative;
    width: 100vw;
    margin-left: calc(-50vw + 50%);  /* 부모 제약을 벗어나게 */
    margin-right: calc(-50vw + 50%);
    padding: 5rem 0;
}

/* main_sec cont03 방식의 배경색 적용 */
.bg-white {
    background-color: #ffffff;
}
.bg-light-blue {
    background-color: #EDEEFD
    
    ;
}

/* ========================================
   동영상 섹션 스타일 - 공통 CSS 활용
   ======================================== */
#videoSection01 {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2개 컬럼 */
    gap: 20rem;
}

#videoSection01 .data_box {
    display: flex;
    height: 200rem;
    border: 1px solid #DADADA;
    border-radius: 10rem;
    overflow: hidden;
    transition: all .3s;
}

#videoSection01 .data_box:hover {
    box-shadow: rgba(201, 201, 201, 0.2) 0px 4px 10px;
}

#videoSection01 .box {
    display: flex;
    width: 100%;
    height: 100%;
}

#videoSection01 .img {
    position: relative;
    width: 300rem;
    height: 100%;
    overflow: hidden;
    flex-shrink: 0;
}

#videoSection01 .img figure {
    display: block;
    width: 100%;
    height: 100%;
    transition: all .4s;
    opacity: 30%
}

#videoSection01 .img img,
#videoSection01 .img video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 10rem;
    transition: transform 0.5s;
}

/* 이슈인포그래픽과 동일한 hover 효과 적용 */
#videoSection01 .data_box:hover .img img,
#videoSection01 .data_box:hover .img video {
    transform: translate(-50%, -50%) scale(1.1);
}

#videoSection01 .info {
    flex: 1 1 calc(100% - 320rem);
    min-width: 0;
    padding: 0rem 20rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#videoSection01 .category {
    display: block;
    font-size: 14rem;
    font-weight: bold;
    margin-bottom: 10rem;
    color: #55A73A;
}

#videoSection01 .title {
    display: -webkit-box;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.5;
    height: 60rem;
    white-space: normal;
    color: #000000;
    font-size: 20rem;
    font-weight: 800;
    vertical-align: 0;
}

#videoSection01 .title:hover {
    text-decoration: underline;
}

#videoSection01 .contit {
    display: block;
    color: #555555;
    font-size: 14rem;
}

#videoSection01 .date {
    display: block;
    color: #666666;
    font-size: 14rem;
    margin-bottom: 10rem;
}

#videoSection01 .post_hashtag_area {
    margin-top: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#videoSection01 .post_hashtag_area .hashtag-ellipsis {
    display: inline-block;
    color: #666;
    font-size: 14rem;
    margin-left: 5rem;
    vertical-align: middle;
}

/* 반응형 스타일 */
@media (max-width: 860px) {
    #videoSection01 {
        grid-template-columns: 1fr; /* 모바일에서는 1개 컬럼 */
    }
    
    #videoSection01 .data_box {
        height: 250rem;
    }
}

@media (max-width: 767px) {
    /* 영상 섹션 모바일 레이아웃 - 이미지 상단, 정보 하단 */
    #videoSection01 .box {
        flex-direction: column;
    }
    
    #videoSection01 .img {
        width: 100%;
        height: 200rem;
        flex-shrink: 0;
    }
    
    #videoSection01 .info {
        flex: 1 1 100%;
        min-width: 0;
        padding: 15rem 18rem 20rem 18rem;
        width: 100%;
    }
    
    /* 영상 섹션 제목 반응형 스타일 - 국가전략보고서와 동일 */
    #videoSection01 .title {
        display: -webkit-box;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.5;
        height: 60rem;
        white-space: normal;
        font-size: 20rem;
        vertical-align: 0;
    }
    
    /* 전문가 칼럼 제목 반응형 스타일 - 국가전략보고서와 동일 */
    .search-section .list-photo__title {
        display: -webkit-box;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.5;
        height: 60rem;
        white-space: normal;
        font-size: 20rem;
        margin-bottom: 0;
        max-height: none;
    }
}

@media (max-width: 540px) {
    #videoSection01 .data_box {
        height: auto;
        min-height: 300rem;
    }
    
    #videoSection01 .img {
        height: 180rem;
    }
    
    #videoSection01 .img img,
    #videoSection01 .img video {
        border-radius: 8rem;
    }
}

/* ========================================
   섹션 컨테이너 스타일
   ======================================== */
.search-section {
    margin-bottom: 20rem;
    position: relative;
    z-index: 1;
}

/* 섹션 내부 요소들은 배경색 상속 */
.search-section {
    background-color: transparent;
}

/* 섹션 제목 스타일 */
.search-section .section-title {
    margin: 20rem 0 20rem 10rem;
}

/* 통합검색 섹션 제목 폰트 진하게 */
.search-section .section-title__tit {
    font-weight: 800;
}

/* 통합검색 섹션 카운트와 괄호 폰트 사이즈 줄이기 */
.search-section .section-title__tit > span {
    font-size: 18rem !important;
}

/* 메인 섹션 내부 컨테이너 */
.search-section .main_sec_inner {
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 20rem;
}

/* 전문가 칼럼 제목 스타일 - 국가전략보고서와 동일 */
.search-section .list-photo__title {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #000000;
    font-size: 20rem;
    font-weight: 800;
    vertical-align: -12rem;
}

.search-section .list-photo__title:hover {
    text-decoration: underline;
}

/* ========================================
   전문가 컬럼 섹션 배경색 상속
   ======================================== */
/* 전문가 컬럼 스타일은 2025add.css에 정의되어 있음 */

.search_result_area .layout_list_area>li {
    padding: 20rem 30rem 20rem;
    border: 1px solid #DADADA;
    border-radius: 10px;
    padding-right: 30rem;
}

#expertSection .list-photo__item-group {
    align-items: stretch;
    gap: 24rem;
    padding: 20rem 0;
    border-bottom: 1px solid #e1e4ec;
}

#expertSection .list-photo__item-group:last-child {
    border-bottom: none;
}

#expertSection .list-photo__set {
    gap: 12rem;
    background-color: transparent;
}

#expertSection .list-photo__image-area {
    flex: 0 0 200rem; /* 일반 전문가칼럼 목록과 동일한 너비 (200px) */
    max-width: 200rem; /* 일반 전문가칼럼 목록과 동일한 너비 (200px) */
    align-self: stretch;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
}

#expertSection .list-photo__image-area figure,
#expertSection .list-photo__image-area img {
    width: 100%;
    height: 230rem; /* 일반 전문가칼럼 목록과 동일한 높이 (200px) */
    object-fit: cover;
    border-radius: 16rem;
    overflow: hidden;
}

#expertSection .list-photo__title {
    color: #1b2141;
}

#expertSection .list-photo__txt {
    color: #50576b;
    font-size: 16rem;
    line-height: 1.6;
    max-height: 70rem;
    overflow: hidden;
}

#expertSection .list-photo__info {
    display: flex;
    flex-wrap: wrap;
    gap: 10rem 16rem;
    color: #6f7690;
    font-size: 14rem;
}

/* ========================================
   반응형 디자인
   ======================================== */
@media (max-width: 768px) {
    .search-section .main_sec_inner {
        padding: 0 15rem;
    }
    
    .search-section-wrapper {
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
    }
    
    /* 반응형 - 섹션 제목 스타일 */
    .search-section .section-title {
        margin: 20rem 0 20rem 10rem;
    }
    
    #expertSection .list-photo__item-group {
        flex-direction: column;
        gap: 16rem;
        padding: 16rem 0;
    }
    
    #expertSection .list-photo__image-area {
        order: -1;
        flex: 0 0 auto;
        max-width: none;
        width: 100%;
    }
    
    #expertSection .list-photo__image-area figure,
    #expertSection .list-photo__image-area img {
        height: 140rem; /* 일반 전문가칼럼 목록과 동일한 모바일 높이 (140px) */
    }
    
    /* 모바일에서 전문가칼럼 제목 2줄 표시 */
    #expertSection .list-photo__title {
        display: -webkit-box;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.5;
        height: 60rem;
        white-space: normal;
        max-height: none;
    }
    
    #expertSection .list-photo__txt {
        max-height: none;
        font-size: 16rem; /* 다른 섹션과 동일한 모바일 폰트 크기 */
    }
    
    #expertSection .list-photo__name {
        font-size: 14rem; /* 다른 섹션과 동일한 모바일 폰트 크기 */
    }
    
    #expertSection .list-photo__info {
        font-size: 14rem; /* 다른 섹션과 동일한 모바일 폰트 크기 */
    }
}

@media (max-width: 480px) {
    .search-section .main_sec_inner {
        padding: 0 10rem;
    }
    
    .search-section-wrapper {
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
    }
    
    /* 반응형 - 섹션 제목 스타일 */
    .search-section .section-title {
        margin: 20rem 0 20rem 10rem;
    }
    
    /* 소형 모바일에서도 전문가칼럼 제목 2줄 표시 */
    #expertSection .list-photo__title {
        display: -webkit-box;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.5;
        height: 60rem;
        white-space: normal;
        max-height: none;
    }
    
    /* 소형 모바일에서도 폰트 크기 유지 */
    #expertSection .list-photo__txt {
        font-size: 15rem; /* 소형 모바일 폰트 크기 */
    }
    
    #expertSection .list-photo__name {
        font-size: 13rem; /* 소형 모바일 폰트 크기 */
    }
    
    #expertSection .list-photo__info {
        font-size: 13rem; /* 소형 모바일 폰트 크기 */
    }
}

/* 섹션 래퍼에 패딩 추가하여 내용과 배경 구분 */
.search-section-wrapper {
    padding: 20rem 0;
}

/* 동영상 섹션 - 공통 CSS 클래스 사용 */

@media (max-width: 768px) {
    .search-section-wrapper {
        padding: 15rem 0;
    }
}

@media (max-width: 480px) {
    .search-section-wrapper {
        padding: 10rem 0;
    }
}

/* 동영상 섹션 - 공통 CSS 클래스 사용 */

/* ========================================
   국회도서관 정보서비스 탭 전용 스타일 (list_ori.jsp 호환)
   ======================================== */
/* ui.common.css, ui.sub.css의 공통 CSS를 그대로 사용 */

/* 국회도서관 탭 영역 기본 스타일 */
#nanetSearchResults {
    background-color: #ffffff;
}

/* imgnone 클래스: 이미지 없는 리스트 - 공통 CSS 상속 */
.layout_list_area.imgnone {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 
   아래 스타일들은 ui.common.css와 ui.sub.css에 정의된 스타일을 그대로 적용
   - .layout_list_area > li: padding 20rem, border-bottom 1px solid #DADADA
   - .layout_list_area .list_link .title: font-size 20rem, font-weight 800
   - .textinfo > li: display flex, color #666, font-size 14rem, line-height 20rem
   공통 CSS가 자동으로 적용되므로 별도 오버라이드 불필요
*/

/* titSmall 스타일 (ui.sub.css 기본 스타일) */
.titSmall {
    margin: 6rem 0 6rem 0;
}

/* 탭 헤더 스타일 */
.sub-tab-header_t_2, .sub-tab-header_t_3 {
    cursor: pointer;
    transition: all 0.3s ease;
}

.sub-tab-header_t_2.active {
    font-weight: 700;
    color: #128DDD;
}

.lineVertical {
    color: #ddd;
    margin: 0 10rem;
}

section#videoSectionWrapper{
	margin-top: -15px;
}

img.coverimg
{
	opacity: 100%;
	position: absolute;
	width: 100%;
	height: 90%;
	overflow: hidden;
	flex-shrink: 0;
	border-radius: 10px;
	z-index: 1;
}

/* 영상 섹션의 imgContent와 realImg 스타일 (목록용) */
#videoSection01 .imgContent {
	position: relative;
	width: 100%;
	height: 100%;
}

#videoSection01 .realImg {
	position: relative;
	width: 100%;
	height: 100%;
}

#videoSection01 .realImg img:not(.coverimg) {
	position: relative;
	width: 100%;
	height: auto;
	z-index: 0;
}

/* Generated from inline styles */
.s001 { animation-delay: 0.4s;visibility: visible; }
.s002 { top: 200px; }
.s003 { display:none; }
.s004 { color: #007bff;cursor: pointer;text-decoration: underline; }
.s005 { display: none; }
.s006 { color: #007bff;cursor: pointer;text-decoration: underline;display: none; }
.s007 { cursor:pointer; }
.s008 { width: 140px;height: 180px; }
.s009 { max-width: 28.6rem; }
.s010 { margin-right: 5px; }
.s011 { position: absolute;top: -3px;width:20px; }