@charset "UTF-8"; 

/* 공통 게시판 레이아웃 */
#boHead + #boCon {padding-top:20px; transition:.3s;}

@media screen and (max-width:350px){
	#boHead + #boCon {padding-top:17px;}
}


/* 검색영역 */
#con .boWrap .searchCon {position:relative; height:40px; transition:.3s;}
#con .boWrap .searchCon .inTxt {display:block; width:100%; padding:10px 50px 10px 20px; border:0; border-bottom:1px solid #000; font-weight:500; font-size:0.875rem; color:#000;}
#con .boWrap .searchCon .inTxt::placeholder {font-weight:400; font-size:0.875rem; color:#7E8790;}
#con .boWrap .searchCon .btnSearch {display:block; position:absolute; top:50%; right:20px; width:18px; height:18px; background-color:transparent; background-image:url(../images/board/i_searchCon.svg); background-repeat:no-repeat; background-position:center; transform:translateY(-50%); transition:.3s;}
#con .boWrap .searchCon .btnSearch:focus,
#con .boWrap .searchCon .btnSearch:hover,
#con .boWrap .searchCon .btnSearch.active {background-image:url(../images/board/i_searchCon_on.svg);}


/* default 게시판 list */
#con .boWrap .allTxt {display:inline-block; font-weight:700; font-size:0.875rem; color:#000;}
#con .boWrap .dataList {display:flex; width:100%; align-items:center; justify-content:space-between;}
#con .boWrap .dataList > li {display:flex; margin:0 -10px; padding-right:30px; transition:.3s;}
#con .boWrap .dataList > li:last-child {padding-right:0;}
#con .boWrap .dataList > li .txt {display:block; padding:0 10px; font-weight:500; font-size:1rem; color:#000;}
#con .boWrap .dataList > li .txt:first-child {position:relative;}
#con .boWrap .dataList > li .txt:first-child::after {content:''; position:absolute; top:50%; right:-0.5px; width:1px; height:11px; background-color:#000000; transform:translateY(-50%); transition:.3s;}


/* @공통 : pagination */
#con .pagination {display:block; padding:20px 0 10px; overflow-x:auto; overflow-y:hidden;}
#con .pagination .pagingWrap {display:flex; min-width:280px; align-items:center; justify-content:center;}
#con .pagination .pagingWrap .paging {display:block; width:26px; height:26px; margin:0 3px; border-radius:50%; background-color:#ffffff; font-weight:700; font-size:0.875rem; color:#000; line-height:26px; text-align:center; flex-shrink:0; transition:width 0.3s, height 0.3s, margin 0.3s, background 0.3s, color 0.2s;}
#con .pagination .pagingWrap .paging:focus,
#con .pagination .pagingWrap .paging:hover,
#con .pagination .pagingWrap .paging.active {background-color:#1A4399; color:#ffffff;}
#con .pagination .pagingWrap .btnNav {display:block; width:26px; height:26px; margin:0 3px; border:1px solid #E9E9E9; border-radius:50%; background-color:#ffffff; background-size:16px; background-repeat:no-repeat; background-position:center center; text-align:center; box-shadow:0 2px 4px 0 rgba(26, 67, 153, 0); flex-shrink:0; transition:width 0.3s, height 0.3s, margin 0.3s, border 0.3s, box-shadow 0.3s;}
#con .pagination .pagingWrap .btnNav.first {background-image:url(../images/board/i_first.svg);}
#con .pagination .pagingWrap .btnNav.prev {background-image:url(../images/board/i_prev.svg);}
#con .pagination .pagingWrap .btnNav.next {background-image:url(../images/board/i_next.svg);}
#con .pagination .pagingWrap .btnNav.last {background-image:url(../images/board/i_last.svg);}
#con .pagination .pagingWrap .btnNav:focus,
#con .pagination .pagingWrap .btnNav:hover,
#con .pagination .pagingWrap .btnNav.active {border-color:#1A4399; box-shadow:0 2px 4px 0 rgba(26, 67, 153, 0.3);}
#con .pagination .pagingWrap .btnNav:focus.first,
#con .pagination .pagingWrap .btnNav:hover.first,
#con .pagination .pagingWrap .btnNav.active.first {background-image:url(../images/board/i_first_on.svg);}
#con .pagination .pagingWrap .btnNav.prev:focus,
#con .pagination .pagingWrap .btnNav.prev:hover,
#con .pagination .pagingWrap .btnNav.prev.active {background-image:url(../images/board/i_prev_on.svg);}
#con .pagination .pagingWrap .btnNav.next:focus,
#con .pagination .pagingWrap .btnNav.next:hover,
#con .pagination .pagingWrap .btnNav.next.active {background-image:url(../images/board/i_next_on.svg);}
#con .pagination .pagingWrap .btnNav.last:focus,
#con .pagination .pagingWrap .btnNav.last:hover,
#con .pagination .pagingWrap .btnNav.last.active {background-image:url(../images/board/i_last_on.svg);}

/* 스크롤바의 폭 너비 */
#con .pagination::-webkit-scrollbar {height:3px;}
#con .pagination::-webkit-scrollbar-thumb {
	background: #3E79F4; /* 스크롤바 색상 */
	border-radius: 10px; /* 스크롤바 둥근 테두리 */
}
#con .pagination::-webkit-scrollbar-track {
	background: rgba(220, 20, 60, .1);  /*스크롤바 뒷 배경 색상*/
}

@media screen and (max-width:350px){
	#con .pagination .pagingWrap .paging {width:24px; height:24px; margin:0 3px; line-height:24px;}
	#con .pagination .pagingWrap .btnNav {width:24px; height:24px; margin:0 3px; background-size:14px;}
}


/* 오디오가이드 list */
#audio .playList {display:block; padding-top:15px; transition:.3s;}
#audio .playList > li {display:block; padding:10px 0; border-bottom:1px solid #E9E9E9; transition:.3s;}
#audio .playList > li:first-child {padding:0 0 10px; transition:.3s;}
#audio .playList > li .con {display:flex;}
#audio .playList > li .con .imgCon {display:flex; overflow:hidden; position:relative; width:100px; flex-shrink:0; transition:.3s;}
#audio .playList > li .con .imgCon::before {content:''; padding-top:80%; transition:.3s;}
#audio .playList > li .con .imgCon .img {display:block; position:absolute; top:0; left:0; width:100%; height:100%; object-fit: cover; transform:scale(1); transition:transform .5s;}
#audio .playList > li .con:focus .imgCon .img,
#audio .playList > li .con:hover .imgCon .img,
#audio .playList > li .con.active .imgCon .img {transform:scale(1.15);}
#audio .playList > li .con .infoCon {width:calc(100% - 100px); padding-left:20px; transition:padding .3s;}
#audio .playList > li .con .infoCon .top {display:flex; padding-bottom:10px; align-items:center; transition:padding .3s;}
#audio .playList > li .con .infoCon .top .num {display:flex; padding:5px 12px 5px 28px; border-radius: 100px; background:url(../images/sub/01/02/i_audio.svg) no-repeat left 8px center, #3E79F4; font-weight:500; font-size:0.75rem; color:#fff; align-items: center;}
#audio .playList > li .con .infoCon .top .playTime {display:flex; position:relative; margin-left:10px; padding-left:27px; font-weight:400; font-size:0.875rem; line-height:1; color:#7E8790; align-items: center;}
#audio .playList > li .con .infoCon .top .playTime::before {content:''; display:block; position:absolute; top:50%; left:0; width:24px; height:24px; background:url(../images/sub/01/02/i_play.svg) no-repeat center; transform:translateY(-50%);}
#audio .playList > li .con .infoCon .tit {display:inline-block; overflow:hidden; width:100%; font-weight:700; font-size:1rem; color:#000; white-space: nowrap; text-overflow: ellipsis; word-break:break-all; transition:.3s;}
#audio .playList > li .con:focus .infoCon .tit,
#audio .playList > li .con:hover .infoCon .tit,
#audio .playList > li .con.active .infoCon .tit {color:#1A4399;}
#audio .playList > li .con .infoCon .txt {display:inline-block; overflow:hidden; width:100%; font-weight:400; font-size:0.9375rem; color:#7E8790; white-space: nowrap; text-overflow: ellipsis; word-break:break-all; transition:.3s;}

@media screen and (max-width: 350px) {
	#audio .playList {padding-top:10px;}
	#audio .playList > li .con .infoCon {padding-left:15px;}
}
@media screen and (max-width: 300px) {
	#audio .playList {padding-top:10px;}
	#audio .playList > li {padding:15px 0 10px;}
	#audio .playList > li .con {display:block;}
	#audio .playList > li .con .imgCon {width:100%;}
	#audio .playList > li .con .infoCon {width:100%; padding:10px 0 0;}
	#audio .playList > li .con .infoCon .top {padding-bottom:7px;}
	#audio .playList > li .con .infoCon .top .num {padding:5px 12px 5px 26px; background-size:14px;}
	#audio .playList > li .con .infoCon .top .playTime {margin-left:7px; padding-left:25px;}
	#audio .playList > li .con .infoCon .top .playTime::before {width:20px; height:20px; background-size:20px;}
}


/* 오디오가이드 View */
#boView .topCon {display:block; text-align: center;}
#boView .topCon .num {display:inline-block; position:relative; padding:7px 10px 5px 30px; border-radius:100px; background-color:#3E79F4; font-weight:500; font-size:0.75rem; color:#fff; transition:.3s;}
#boView .topCon .num::before {content:''; display:block; position:absolute; top:50%; left:9px; width:16px; height:16px; background:url(../images/board/view/i_audioNum.svg) no-repeat center; transform:translateY(-50%); transition:.3s;}
#boView .topCon .tit {display:block; margin-top:30px; font-weight: 700; font-size:1.125rem; color:#000; transition:.3s;}
#boView #viewSlide {position:relative; margin:30px 65px 0; overflow:hidden; transition:.3s;}
#boView #viewSlide .imgCon {display:block; position:relative; overflow:hidden;}
#boView #viewSlide .imgCon::before {content:''; display:block; padding-top:100%;}
#boView #viewSlide .imgCon .img {display:block; position:absolute; top:50%; left:0; width:100%; height:100%; transform:translateY(-50%); object-fit:cover;}
#boView #viewSlide .btnNav {display:block; position:absolute; top:50%; width:24px; z-index:2; height:24px; background-color:transparent; background-repeat:no-repeat; background-position:center; transform: translateY(-50%); transition:.3s;}
#boView #viewSlide .btnNav.prev {left:10px; background-image: url(../images/board/i_view_prev.svg);}
#boView #viewSlide .btnNav.next {right:10px; background-image: url(../images/board/i_view_next.svg);}
#boView #viewSlide .btnNav.prev:focus,
#boView #viewSlide .btnNav.prev:hover,
#boView #viewSlide .btnNav.prev.active {background-image: url(../images/board/i_view_prev_on.svg);}
#boView #viewSlide .btnNav.next:focus,
#boView #viewSlide .btnNav.next:hover,
#boView #viewSlide .btnNav.next.active {background-image: url(../images/board/i_view_next_on.svg);}

#boView #viewSlide .swiper-slide .btnBig {display:block; position:absolute; bottom:20px; left:50%; z-index:2; width:36px; height:36px; border-radius:50%; background-color:rgba(0, 0, 0, 0.5); background-image:url(../images/board/i_big.svg); background-repeat:no-repeat; background-position:center; transform: translate(-50%, 0); transition:.3s;}
#boView #viewSlide .swiper-slide .btnBig:focus,
#boView #viewSlide .swiper-slide .btnBig:hover,
#boView #viewSlide .swiper-slide .btnBig.active {background-color:rgba(26, 67, 153, 0.8);}
#boView .pagination {padding:0 0 30px; text-align:center;}
#boView .pagination .swiper-pagination-bullet {width:10px; height:10px; font-size:0; background-color:#d9d9d9; opacity:1;}
#boView .pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {background-color:#1D3E7F;}
#boView .pagination .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 5px)}

#boView .txtCon {display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; height:4.21875rem; line-height:1.5; font-weight:400; font-size:0.9375rem; color:#7E8790; text-overflow: ellipsis; word-break: break-word;}
#boView .btn-more {display:block; position:relative; margin:20px auto 0; padding-left:30px; font-weight:700; font-size:0.9375rem; color:#000; background-color:transparent;}
#boView .btn-more::before {content:''; display:block; position:absolute; top:50%; left:0; width:24px; height:24px; background:url(../images/board/view/i_more.svg) no-repeat center; transform:translateY(-50%);}
#boView .audio-player {position:absolute; bottom:0; left:0; width:100%; padding:20px; background-color:#172343;}
#boView .audio-player .track-title {font-size:0.875rem; font-weight:700; color:#fff;}
#boView .audio-player #seekObjContainer {padding-top:20px;}
#boView .audio-player #timeline1 {display:flex; width: 100%; height:5px; border-radius:1px; background:#fff; align-items:center;}
#boView .audio-player #seekObj1 {width:14px; height:14px; background: #172343; border-radius: 50%; border:3px solid #fff; flex-shrink:0;}
#boView .audio-player .scrubber {display:flex; justify-content: space-between;}
#boView .audio-player .scrubber span {display:block; padding-top:10px; font-weight:500; font-size:0.75rem; color:#fff;}

#boView .utils {display:flex; margin:0 -20px; justify-content:center;}
#boView .utils > li {display:block; padding:0 20px;}
#boView .utils > li .play-pause {display:block; width:24px; height:24px; background-color:transparent; background-repeat:no-repeat; background-position:center; font-size:0;}
#boView .utils > li .play-pause {background-image:url(../images/board/view/i_play.svg);}
#boView .utils > li .play-pause.pause {background-image:url(../images/board/view/i_pause.svg);}


@media screen and (max-width:350px){
	
}

















/* 대메뉴명 > 페이지명 */
#con .s0000 {display:block;}


@media screen and (max-width:350px){
	
}