@charset "utf-8";


/* 공연정보 게시판 목록 */
#bo_list .list-box { }
#bo_list .list-box .empty_table { display:flex; justify-content:center; align-items:center; height:30vh; }

#bo_list .list-box .tiles { display:flex; flex-wrap:wrap; }
#bo_list .list-box .a { overflow:hidden; }
#bo_list .list-box .a::before,
#bo_list .list-box .a::after { display:none; }

#bo_list .list-box .li_type { position:absolute; left:0; top:0; z-index:9; }
#bo_list .list-box .li_type span { display:inline-block; padding:5px 10px 4px; font-size:.625rem; font-weight:700; border-radius:5px; border:1px solid var(--main-color2); }
#bo_list .list-box .li_type span.best { background:var(--main-color2); color:#fff; }
#bo_list .list-box .li_type span.new { background:#fff; color:var(--main-color2); }

#bo_list .list-box .li_ck { position:absolute; z-index:9; top:0; right:0; display:flex; justify-content:center; align-items:center; }
#bo_list .list-box .li_ck input { margin:0; }
#bo_list .list-box .li_num { position:absolute; z-index:3; right:5px; top:5px; }

/* 글쓰기 상단버튼 컨테이너 스타일 시작 */
.snw-buttons {
    display: flex; /* 플렉스 박스로 설정 */
    justify-content: flex-end; /* 버튼을 오른쪽에 배치 */
    margin-bottom: 0px; /* 아래쪽 여백 설정 */
}
/* 글쓰기 상단버튼 */
.snbtn_write {
    display: inline-block; /* 인라인 블록으로 설정하여 크기 조정 가능 */
    padding: 4px 20px; /* 내부 여백 설정 */
    font-size: 0.95rem; /* 글꼴 크기 설정 */
    font-weight:400; 
    color: #ffffff !important; /* 글자 색상 설정, !important로 상위 속성 무시 */
    background-color: #333; /* 배경 색상 설정 */
    border: none; /* 테두리 없음 */
    border-radius: 5px; /* 둥근 모서리 설정 */
    text-align: center; /* 텍스트 중앙 정렬 */
    text-decoration: none !important; /* 텍스트 데코레이션 없음, !important로 상위 속성 무시 */
    transition: background-color 0.3s ease; /* 배경 색상 전환 효과 설정 */
}
/* 글쓰기 상단버튼 호버 시 배경 색상 변경 */
.snbtn_write:hover {
    background-color: #b99374; /* 배경 색상 어둡게 설정 */
}
/* 글쓰기 상단버튼 컨테이너 스타일 끝 */

/* 여분필드 정렬버튼 추가 */
#bo_list .list-total .btn-sort a {
    display: inline-block;  /* 인라인 블록 요소 */
    padding: 2px 8px;  /* 내부 콘텐츠와 요소 경계(border) 사이의 여백. 상하여백, 좌우 여백은 */
    margin: 0px;  /* 요소 주변의 외부 여백 */
    margin-right: -20px; /* 오른쪽 여백을 줄임 */
    background-color: #975dc6; /* 배경 */
    color: #fff;  /* 텍스트 색상 */
    text-decoration: none;  /* 텍스트에 밑줄을 제거 */
    border-radius: 5px;  /* 테두리의 모서리를 둥글게 */
    transition: background-color 0.3s ease; /* 배경 색상 변화를 부드럽게 */
    font-weight: 400; /* 텍스트의 굵기 */
}

#bo_list .list-total .btn-sort a:hover {
    background-color: #cc0000; /* 호버 시 어두운 빨간색 */
}

#bo_list .category-box.photo li a {
font-weight: 400;
}

/* 카테고리와 날짜를 나란히 배치 */
.li_ca_date {
    display: flex;
    align-items: center;
}

/* 카테고리 스타일 */
.li_ca {
    margin-right: 8px; /* 카테고리와 날짜 사이의 간격 */
}

/* 날짜 스타일 */
.li_date {
    font-size: 1rem; /* 날짜의 폰트 크기 */
    color: #666; /* 날짜의 폰트 색상 */
    font-weight: bold; /* 굵은 폰트로 설정 */
}

#bo_list .list-box .li_ca { margin-bottom:5px; } /* 카데고리 하단여백 */

/* 카데고리 스타일 */
#bo_list .list-box .li_ca span { display:inline-block; padding:2px 4px; border-radius:10px; border:1px solid var(--main-color1); color: #013ADF; font-size:.9rem; 
font-weight: 400;
} 
/* 카데고리 스타일 */

#bo_list .list-box .li_thumb .img { 
transition:transform 700ms; 
border: 1px solid #E6E6E6; /* 1px 두께의 테두리 */
}

#bo_list .list-box .li_thumb:not(.noimg) img.img { padding-bottom:0 !important; }
#bo_list .list-box .li_thumb.noimg .img { transform:scale(1); }
#bo_list .list-box .li_thumb.noimg:before { content:"이미지 없음"; position:absolute; left:0; top:0; right:0; bottom:0; background:#f8f8f8; border:1px solid #eee; display:flex; justify-content:center; align-items:center; }

/* 썸네일 이미지 위에 상태를 표시하기 */
.li_thumb {
    position: relative;
}

.status-label {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 0.875rem;
}

.status-label-always {
    background-color: #f6cd28; /*상시진행 배경색 */
    color: #131313; /* 텍스트색상 */
}

.status-label-open {
    background-color: #2f78d6; /*진행중 배경색 */
    color: white; /* White text */
}

.status-label-closed {
    background-color: #c02fd6; /* 종료 배경색 */
    color: white; /* White text */
}

#bo_list .list-box .content { text-align: left; }  /* 콘텐츠 왼쪽 정렬로 변경 */

/* 제목 정렬 */
#bo_list .list-box .li_subject { 
    display: block; 
    width: 100%; 
}

/* 제목 텍스트 스타일 설정(두줄) */
#bo_list .list-box .li_subject .subject {
    display: -webkit-box; /* 플렉스 박스 사용 */
    -webkit-line-clamp: 2; /* 두 줄로 제한 */
    -webkit-box-orient: vertical; /* 수직 박스 방향 */
    overflow: hidden; /* 넘친 콘텐츠 숨김 */

    font-size: 1.25rem;
    line-height: 1.4;
    color: #111;
    font-weight: 500;   
    word-break: break-word;
}

/* 설명 텍스트 스타일 설정 */
#bo_list .list-box .li_desc { color:#888; }

/* 목록 스타일링 */
#bo_list .list-box ul { display:flex; font-size:.875rem; margin-top:20px; } /* 목록을 플렉스 컨테이너로 설정 */
#bo_list .list-box li:not(:last-child) { position:relative; margin-right:10px; padding-right:10px; } /*마지막항목 제외한 목록항목 스타일*/
#bo_list .list-box li:not(:last-child):before { content:""; position:absolute; right:0; top:calc(50% - 6px); width:1px; height:12px; background:#ddd; } /* 마지막 항목을 제외한 목록 항목 사이에 구분선을 추가 */

/* 알림 아이콘 스타일 */
#bo_list .list-box .notice-icon { width:32px; height:32px; font-size:.875rem; background:var(--main-color3); color:#fff; border-radius:99px; display:flex; justify-content:center; align-items:center; box-shadow:0 0 3px rgba(0,0,0,.3); }
#bo_list .list-box .notice-icon i { transform:rotate(25deg); }

/* 제목 아래줄 실선 추가 */
#bo_list .list-box .line {
   content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: #E6E6E6;  /* 선의 색상 (#888은 회색) */
    margin: 5px 0 10px;  /* 위쪽 여백 5px, 아래쪽 여백 10px */
}


@media (max-width: 1024px) {

}


@media (max-width: 767px) {

/* 모바일에서 공지 게시물 한 줄에 1개씩 보이게 설정 */
    .bo_notice {
        width: 100% !important;  /* 한 줄에 1개씩 */
        display: block !important;
    }

#bo_list .list-box .li_subject .subject {
    font-size: 1.1rem;
}
 /* 이미지 타일 전체영역 좌우여백 줄이기 추가 코드 */
 /* 좌우 패딩을 0으로 설정하여 전체 컨테이너의 여백을 제거 */
    #bo_list {
        padding-left: 0;
        padding-right: 0;
    }
 /* 음수 마진을 적용하여 화면 가장자리까지 확장 */
    #bo_list .list-box {
        margin-left: -15px;
        margin-right: -15px;
    }
 /* .tiles 클래스의 패딩을 0으로 설정하여 내부 여백을 제거 */
    #bo_list .list-box .tiles {
        padding: 5px;
    }
 /* .tiles 내부의 직계 자식 요소들에 작은 좌우 패딩(5px)을 적용하여 타일 간에 최소한의 간격을 유지 */
    #bo_list .list-box .tiles > * {
        padding-left: 5px;
        padding-right: 5px;
    }

/* 이미지와 카테고리 사이의 상하간격 */
#bo_list .list-box .content { 
   margin-top: 5px; /* 원하는 상단 여백 값으로 변경 */
}  


/* 카데고리 스타일 */
#bo_list .list-box .li_ca span { display:inline-block; padding:1px 1px; border-radius:6px; border:1px solid var(--main-color1); color: #013ADF; font-size:.7rem; 
font-weight: 400;
} 

.li_ca {
display: none; /* 모바일에서는 카데고리 숨김 */
}

/* 날짜 스타일 */
.li_date {
    font-size: 1rem; /* 날짜의 폰트 크기 */
    color: #5e1adc; /* 날짜의 폰트 색상 */
    font-weight: bold; /* 굵은 폰트로 설정 */
}

.li_ca_date {
    display: flex;
    align-items: center;
justify-content: center; /* 자식 요소를 수평 가운데 정렬 */
}

}


/* 게시판 쓰기 */
#bo_w { border-top:1px solid #666; }
#bo_w .write-box { --odd-width:180px; }
#bo_w .write-box > ul { display:flex; flex-wrap:wrap; }
#bo_w .write-box > ul > li { padding:15px 20px; border-bottom:1px solid #ddd; display:flex; align-items:center; }
#bo_w .write-box > ul > li:nth-child(odd) { width:var(--odd-width); background:#f8f8f8; }
#bo_w .write-box > ul > li:nth-child(odd).required:after { content:"*"; color:#f50000; display:inline-block; }
#bo_w .write-box > ul > li:nth-child(even) { width:calc(100% - var(--odd-width)); }
#bo_w .write-box > ul > li.noflex { display:block; }
#bo_w .write-box > ul > li.full { width:100%; padding-left:0; padding-right:0; }

#bo_w .write-box label { position:relative; padding:5px 0; margin-right:5px; }
#bo_w .write-box label ~ label { margin-left:10px; }
#bo_w .write-box textarea { resize:none; }

#bo_w .write-box i { font-size:1.25rem; margin-right:3px; }
#bo_w .write-box i.link { transform:rotate(-45deg); }
#bo_w .write-box .w_link span { display:inline-block; width:50px; }
#bo_w .write-box .w_link ~ .w_link,
#bo_w .write-box .w_file ~ .w_file { margin-top:5px; }

#bo_w .write-box .file_del { display:inline-block; margin-left:10px; }


@media (max-width: 1024px) {
    #bo_w .write-box { --odd-width:130px; }
}

@media (max-width: 767px) {
    #bo_w .write-box > ul > li { padding:10px 15px; width:100% !important; }
    #bo_w .write-box > ul > li:nth-child(even) { padding:10px 0; }

    #bo_w .write-box .w_link { display:flex; align-items:center; }

	#bo_w .write-box input[type="file"] + input[type="text"] { margin-top:5px; }

	#bo_w .write-box .file_del { margin-left:0; }
}


/* 댓글 */
/*#bo_comment .pf_img { display:none; }*/


/* 게시판 읽기 */
#bo_v { --view-row-padding:30px; --view-col-padding:10px; }
 /* #bo_v 요소 내부의 클래스가 --view-row-padding 변수로부터 가져온 30px의 상단 패딩과 --view-col-padding 변수로부터 가져온 10px의 왼쪽 패딩을 적용받도록 설정 */

/* 기본 레이아웃 설정 */
#bo_v .view-top { display:grid; grid:auto 1fr/calc(45% - 40px) calc(55% - 40px); justify-content:space-between; }
/* view-top 요소를 그리드 컨테이너로 만들고, 2개의 행과 2개의 열로 구성된 그리드를 설정합니다. 각 열은 calc 함수를 사용하여 전체 너비의 비율에서 40픽셀을 뺀 값을 너비로 가집니다. 자식 요소들은 그리드 컨테이너 내에서 균등하게 공간을 나누어 배치 */

/* 헤더 스타일 */
/* #bo_v .header { grid-row:1/2; grid-column:2/3; }*/
#bo_v .header {
    grid-row: 2/3; /* 헤더가 그리드의 두 번째 행(세로)에 위치하도록 지정 */
    grid-column: 2/3; /* 헤더가 그리드의 두 번째 열(가로)에 위치하도록 지정 */
    margin-top:5px; /* 카테고리와 제목, 작성자등이 속한 헤더의 상단 여백 값 */
}

#bo_v .header .ctg { margin-top: 0px; margin-bottom:10px; } /* 카테고리 이름 */
#bo_v .header .ctg span { display:inline-block; border-radius:99px; padding:5px 20px; border:1px solid var(--main-color1); color:var(--main-color1); font-weight: 400; }

#bo_v .header .subject { font-size:1.7rem; font-weight:600; margin-bottom:5px; }
#bo_v .header .desc b { color:#888;  margin-right: 5px; } /* 또는 원하는 간격 (단위: px, em, rem 등) */ 

/* 작성자와 조회수를 포함하는 요소 */
#bo_v .header .desc {
    display: flex; /* Flexbox 레이아웃 사용 */
    justify-content: space-between; /* 좌우로 배치 */
    align-items: center; /* 세로 정렬 */
    margin-top: 10px; /* 원하는 간격 설정 */
}

/* 작성자 텍스트 프로필 사진 스타일 */
#bo_v .header .desc .author {
    display: flex;
    align-items: center;
    color: #888;
}

#bo_v .header .desc .author img {
    width: 40px; /* 원하는 너비로 변경 */
    height: 40px; /* 원하는 높이로 변경 */
    border-radius: 50%; /* 이미지를 원형으로 만들기 위해 */
    margin-right: 10px; /* 텍스트와 이미지 사이 간격 조절 */
}

/* 조회수 텍스트 스타일 */
#bo_v .header .desc .views {
    display: flex;
    align-items: center;
    color: #888;
}

.views .fa-clock-o {
    margin-right: 4px; /* 아이콘과 날짜 사이의 간격 */
}

/* 작성자와 조회수 내부의 b 요소 간격 */
#bo_v .header .desc b {
    margin-right: 5px; /* 추가된 간격 */
}

/* 이미지 영역 */
/* 컨테이너가 그리드 레이아웃의 첫째줄에서 세째 줄까지, 첫번째 열에 걸쳐 위치하도록 설정 */
#bo_v .view-img { grid-row:1/3; grid-column:1/2; }

/* #bo_v 요소 내의 .view-img 클래스 요소 내의 .swiper-img 클래스의 테두리 설정 */
 #bo_v .view-img .swiper-img { border:1px solid #ddd; }

/* .img 클래스가 적용된 요소에 패딩과 백그라운드 설정 */
/* #bo_v .view-img .img { padding-bottom:150%; background:none no-repeat center/contain;  */
 
/* 이미지 스타일 */
/* 이미지가 포함된 요소의 크기 설정 */
        #bo_v .view-img .img { 
            position: relative;
            width: 100%;
            padding-bottom: 145%; /* 4:3 비율 (높이 = 너비의 75%) */
            background-size: contain; /* 원본 비율 유지 */
            background-position: center;
            background-repeat: no-repeat;
        }

/* 썸네일 슬라이드 스타일 */
/* .swiper-thumb 클래스가 적용된 요소에 위쪽 마진 설정 */
#bo_v .view-img .swiper-thumb { margin-top:10px; }

/* .swiper-thumb 클래스의 .img 요소에 백그라운드 이미지가 컨테이너를 덮도록 설정, 테두리 및 커서 변경 효과 적용 */
#bo_v .view-img .swiper-thumb .img { background-size:cover; transition-duration:300ms; border:1px solid #ddd; cursor:pointer; }

/* 활성화된 썸네일 슬라이드에 테두리 및 내부 그림자 설정 */
#bo_v .view-img .swiper-thumb .swiper-slide-thumb-active .img { border:1px solid #d60000; box-shadow: 0 0 0 5px #d60000 inset;  }

/* 썸네일 슬라이드에 마우스를 올렸을 때 테두리 및 내부 그림자 설정 */
#bo_v .view-img .swiper-thumb .swiper-slide:hover .img { border:1px solid #d60000; box-shadow: 0 0 0 5px #d60000 inset; }

/* 인포 항목 스타일 */
/* #bo_v .view-head { grid-row:2/3; grid-column:2/3; } */
/* #bo_v .view-head > ul:not(.file) { border-top:1px solid #ddd; margin-top:30px; padding-top:30px; } */
#bo_v .view-head {
    grid-row: 2/3; /* 기존: 2/3 */
    grid-column: 2/3;
    margin-top: 200px; /* 원하는 여백 값으로 조정 */
}

#bo_v .view-head > ul:not(.file) {
    border-top: 1px solid #ddd; /* 작성자와 기간 사이 실선 */
    margin-top: 10px; /* 기존: 30px; 상단 외부 여백, 작성자와 실선 여백 */
    padding-top: 20px; /* 상단 내부여백, 작성자와 기간 사이 간격 */
    padding-bottom: 20px; /* 하단 내부여백 */
}

#bo_v .view-head > ul li > b { display:block; font-size:1.25rem; }
#bo_v .view-head > ul li > span { display:block; }

/* 게시글읽기 항목 배열방법 */
/* #bo_v .view-head .info li:not(:first-child) { margin-top:30px; } */
/* #bo_v .view-head .info li b { margin-bottom:10px; } */
/* #bo_v .view-head .info li span { color:#777; } */

#bo_v .view-head .info li:not(:first-child) { margin-top:30px; } /* 각 줄의 위쪽 간격을 설정 */
#bo_v .view-head .info li { display:flex; margin-bottom:10px; align-items:center; flex-wrap:wrap; }
#bo_v .view-head .info li b { width:100px; }

/* 출력되는 정보 폰트 크기를 원하는 크기로 설정 (예: 1.25rem) */
#bo_v .view-head .info li span { flex:1; color:#777; font-size: 1.25rem; }

/* 가격 정보 스타일 */
#bo_v .view-head .price li { display:flex; justify-content:space-between; align-items:center; }
#bo_v .view-head .price > b { font-size:1.25rem; }
#bo_v .view-head .price span { font-size:1.25rem; }
#bo_v .view-head .price span b { font-size:1.5rem; color:#d60000; }

/* 파일 스타일 */
#bo_v .view-head .file { display:flex; text-align:center; margin:60px -2.5px 0; }
#bo_v .view-head .file li { width:80px; margin:0 2.5px; }
#bo_v .view-head .file a { display:block; height:80px; border:1px solid #ccc; border-radius:5px; background:none no-repeat center/40%; }
#bo_v .view-head .file span { font-size:.875rem; font-weight:600; margin-top:3px; }

/* 바로가기 버튼 */
#bo_v .view-head .go-btn { margin-top:20px;  margin-bottom:40px;}
#bo_v .view-head .go-btn a { padding:8px 15px; border-radius:10px; margin-right:10px; color:#fff; }
#bo_v .view-head .go-btn a:hover { font-weight:700; padding:10px 20px; }

#bo_v .view-head .go-btn a.inquiry { background:#222; }
#bo_v .view-head .go-btn a.store { background:#1ea10d; }

/* 탭 스타일 */
#bo_v .view-box .tab-btn { display:flex; border-bottom:1px solid var(--main-color2); margin-top: 50px; }
#bo_v .view-box .tab-btn li { cursor:pointer; padding:10px 30px; border-radius:10px 10px 0 0; border:1px solid #ccc; border-bottom-color:transparent; margin:0 0 -1px -1px; color:#353535; }
#bo_v .view-box .tab-btn li.on { border-color:inherit; border-bottom-color:#fff !important; z-index:2; font-weight:600; color:var(--main-color2); }
#bo_v .view-box .tab-con { position:relative; margin: 30px 0 50px; }
#bo_v .view-box .tab-con .content { position:absolute; left:0; top:0; right:0; bottom:0; opacity:0; visibility:hidden; overflow:hidden; transition-duration:300ms; }
#bo_v .view-box .tab-con .content.on { position:relative; opacity:1; visibility:visible; }

/* 컨테이너 스타일 */
/* 컨테이너 스타일링 게시물정보와 게시물 본문(상세내용) 사이 여백 */
#bo_v .view-box { position:relative; padding:var(--view-row-padding) 0 calc(var(--view-row-padding) + 20px); /* 요소의 내부여백 */
margin-top:20px; } /* 요소의 상단 외부여백 */

/* 상단 가로줄 */
#bo_v .view-box:before { content:""; position:absolute; left:50%; top:0; width:100vw; transform:translateX(-50%); height:20px; background:#f8f8f8; box-shadow:inset 1px 1px 3px rgba(0,0,0,.1); }

/* 게시물제목 폰트크기 여백 */
#bo_v .view-box .head { font-size:1.25rem; margin:0px 0 50px; border-bottom:1px solid #ddd; text-align:center; font-weight:600; }
#bo_v .view-box .head span { display:inline-block; padding:0 10px 5px; margin-bottom:-1px; border-bottom:2px solid #333; }
#bo_v .view-box .view-editer { margin-top:20px; }

/* 비디오 박스 스타일 */
#bo_v .video-box { max-width:1000px; }
#bo_v .video-box .video { position:relative; padding-bottom:60%; }
#bo_v .video-box .video iframe { position:absolute; width:100%; height:100%; }

/* 파일 다운로드 스타일 */
#bo_v .view-file { padding:var(--view-col-padding) var(--view-row-padding); background:#fcfcfc; border-bottom:1px solid #ddd; }
#bo_v .view-file li { padding:5px 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; }
#bo_v .view-file li b { display:flex; align-items:center; }
#bo_v .view-file li img { width:20px; margin-right:5px; }
#bo_v .view-file li .small { margin-left:5px; color:#888; font-weight:400; }
#bo_v .view-file li .btn { border-radius:99px; padding:5px 15px; border:1px solid #666; margin-left:auto; }
#bo_v .view-file li .btn:hover { background:#333; color:#fff; }
#bo_v .view-file li .btn i { font-size:.875rem; }

/* 링크 스타일 */
#bo_v .view-link { padding:var(--view-col-padding) var(--view-row-padding); display:flex; flex-wrap:wrap; align-items:center; margin:0 -5px; }
#bo_v .view-link li { margin:5px; }
#bo_v .view-link li a { display:inline-block; padding:10px 30px; border:1px solid #ddd; border-radius:99px; }
#bo_v .view-link li a:hover { box-shadow:2px 2px 3px rgba(0,0,0,.1); }
#bo_v .view-link li a i { font-size:.875rem; }

/* 버튼 박스 스타일 */
#bo_v .view-btn-box { border-top:1px solid #ddd; padding-top:40px; }
#bo_v .view-another ~ .view-btn-box { border-top:none; padding-top:0px; }

#bo_v_act {margin-bottom:30px;text-align:center}
#bo_v_act .bo_v_act_gng {position:relative}
#bo_v_act a {margin-right:5px;vertical-align:middle;color:#4a5158}
#bo_v_act a:hover {background-color:#fff;color:#ff484f;border-color:#ff484f}
#bo_v_act i {font-size:1.4em;margin-right:5px}
#bo_v_act_good, #bo_v_act_nogood {display:none;position:absolute;top:30px;left:0;z-index:9999;padding:10px 0;width:165px;background:#ff3061;color:#fff;text-align:center}
#bo_v_act .bo_v_good {display:inline-block;border:1px solid #dedede;width:70px;line-height:46px;border-radius:30px}
#bo_v_act .bo_v_nogood {display:inline-block;border:1px solid #dedede;width:70px;line-height:46px;border-radius:30px}


@media (max-width: 1200px) {
    #bo_v .view-top { grid-template-columns:calc(45% - 20px) calc(55% - 20px); }
}


@media (max-width: 1024px) {
	#bo_v { --view-row-padding:20px; }
	#bo_v .header .subject { font-size:1.5rem; }

/* 반응형 조정 추가 */
 #bo_v .view-img .img {
        width: 100%;
        max-width: 500px; /* 이미지 최대 너비 제한 */
        margin: 0 auto; /* 가운데 정렬 */
    }
}


@media (max-width: 767px) {
/* 테마CSS에서 C클래스 기본패딩값 변수를 15Px로 지정했기에 기본패딩값을 없앰 */
:root {
--c-padding:0px;  /* 기본 패딩값을 0으로 설정 */
}
/* C 클래스에 변수를 사용하여 패딩을 설정 */
  .C {
    padding: var(--c-padding);
  }

 /* 전체 컨텐츠 영역의 패딩 제거 추가 */
  #bo_v { 
    padding-left: 0;
    padding-right: 0;
  }

 /* #bo_v 요소 내부의 클래스가 --view-row-padding 변수로부터 가져온 상단 패딩과 왼쪽 패딩을 적용받도록 설정 */
/* 하위요소에 사용할 가로 행(row)과 세로 열(col)의 변수값 */
#bo_v { 
--view-row-padding:15px; 
--view-col-padding:5px; }

/* 부모 요소 #bo_v의 전체 너비를 차지하고, 다음 요소는 새로운 줄에서 시작 */
    #bo_v .view-top { 
        display: block; 
    }
/* desc 클래스 요소의 아래쪽과 다음요소와의 여백 */
    #bo_v .header .desc { 
        margin-bottom: 10px; 
    }
    /* 제목 스타일 2줄까지만 표시 */
    #bo_v .header .subject {
    display: -webkit-box; /* 플렉스 박스 사용 */
    -webkit-line-clamp: 2; /* 두 줄로 제한 */
    -webkit-box-orient: vertical; /* 수직 박스 방향 */
    overflow: hidden; /* 넘친 콘텐츠 숨김 */

    font-size: 1.4rem;
    line-height: 1.4;
    color: #111;
    font-weight: 600;   
    word-break: break-word;
    }
 /* 인포항목 상단 여백 */
    #bo_v .view-head { 
        margin-top: 10px; 
    }
/* 인포항목 각 줄의 위쪽 간격을 설정 */
    #bo_v .view-head .info li:not(:first-child) { 
        margin-top: 10px; 
    }
/* 모바일에서 항목타이틀의 가로 크기를 줄임 */
    #bo_v .view-head .info li b {
        width: 50px; 
    }
/* 모바일에서 출력항목 폰트크기*/
    #bo_v .view-head .info li span {
        font-size: 1.2rem; 
    }
/* 출력 항목 상단에 여백을 추가하고, 위쪽 테두리를 추가하여 구분합니다 */
    #bo_v .view-head .info { 
        margin-top: 10px; 
        border-top: 1px solid #333; 
    }
    #bo_v .view-head .file { 
        margin-top: 20px; 
    }
    #bo_v .view-head .file a { 
        width: 60px; 
        height: 60px; 
    }
    #bo_v .view-box { 
        margin-top: 20px; 
    }
    #bo_v .view-box:before { 
        height: 2px; 
    }
    #bo_v .view-box .head { 
        margin: 10px 0; 
    }
    #bo_v .view-link li { 
        margin: 2.5px; 
    }
    #bo_v .view-link li a { 
        padding: 5px 15px; 
    }
/* 버튼 높이를 줄이기 위해 패딩 값을 조정합니다. */
    #bo_v .view-head .go-btn a {
        padding: 6px 15px;
        border-radius:10px;  
    }
/* 바로가기 버튼 상하단 외부여백 */
    #bo_v .view-head .go-btn { 
        margin-top: 0px;  
        margin-bottom:20px;
    }
/* 이미지 가로너비 화면에 꽉 차게 하기 */
    #bo_v .view-img .swiper-img {
    position: relative;
    width: 100vw; /* 뷰포트 너비의 100%로 설정 */
    margin-left: calc(-50vw + 50%); /* 화면 중앙 정렬 */
    height: auto;
    overflow: hidden;
}
#bo_v .view-img .img {
    width: 100%;
    height: auto;
    object-fit: cover; /* 이미지를 컨테이너에 맞춰 채우기 */
}

/* 전체 컨텐츠 영역의 패딩 제거 */
  #bo_v {
    padding-left: 0;
    padding-right: 0;
  }

  /* 이미지 주변 요소들의 패딩 추가 */
  #bo_v .view-top,
  #bo_v .view-head,
  #bo_v .view-box {
    padding-left: 0px;
    padding-right: 0px;
  }

/* Swiper 컨테이너가 이미지 크기에 따라 조정되도록 설정 */
.swiper-container {
  width: 100%;
  height: auto; /* 높이를 자동으로 조정 */
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 이미지가 부모 요소에 맞게 조정되도록 설정 */
.swiper-container .swiper-slide img {
  width: 100%;
  height: auto; /* 이미지 높이를 자동으로 조정 */
  object-fit: contain; /* 원본 비율 유지 */
}
}