diff --git a/src/main/webapp/WEB-INF/jsp/nlib/cmm/home.jsp b/src/main/webapp/WEB-INF/jsp/nlib/cmm/home.jsp
index 7ffca4c8..0b7b4427 100644
--- a/src/main/webapp/WEB-INF/jsp/nlib/cmm/home.jsp
+++ b/src/main/webapp/WEB-INF/jsp/nlib/cmm/home.jsp
@@ -1,487 +1,491 @@
-<%@ page language="java" contentType="text/html; charset=UTF-8" %>
-<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
-<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
-<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui" %>
-<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
-<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>
-
-<script>
-
-$(document).ready(function() {
-
-    <c:if test="${fn:length(listBannerInfos) < 2  }">
-    $("#divMainBanner").removeClass();
-    $("#divMainBannerPage").remove();
-    </c:if>
-	
-	$("#DIV_PAGE_MAIN").removeClass("sub");
-    var unreadNotiCnt = $(".noti-btn span.count").text();
-    gfn_myAlert(unreadNotiCnt);
-    
-    
-});
-
-function fn_search(keyword) {
-	var form = document.createElement("form");
-	form.style.display = "none";
-	$(form).attr("action", "/search/searchList.do");
-	$(form).attr("method", "post");
-	
-	var element = document.createElement("input");
-	$(element).attr("name", "query");
-	
-	$(element).attr("value", keyword);
-	form.appendChild(element);
-	document.body.appendChild(form);
-	form.submit();
-	document.body.removeChild(form);
-	
-	return;
-}
-
-function fn_viewAncmnt(articleId) {
-    var form = document.createElement("form");
-    form.style.display = "none";
-    $(form).attr("action", "/bbs/selectAncmntArticle.do");
-    $(form).attr("method", "post");
-    
-    var element = document.createElement("input");
-    $(element).attr("name", "articleId");
-    
-    $(element).attr("value", articleId);
-    form.appendChild(element);
-    document.body.appendChild(form);
-    form.submit();
-    document.body.removeChild(form);
-    
-    return;
-}
-
-function fn_viewQna(articleId, secretYn, myQnaYn) {
-	
-    // 비밀글인 경우, 본인에 한하여 조회 가능 
-    if(secretYn == "Y" && myQnaYn == "N") {
-        alert("비공개 게시물은 작성자만 확인할 수 있습니다.");
-        return;
-    }
-    
-    var form = document.createElement("form");
-    form.style.display = "none";
-    $(form).attr("action", "/bbs/selectQnaArticle.do");
-    $(form).attr("method", "post");
-    
-    var element = document.createElement("input");
-    $(element).attr("name", "articleId");
-    
-    $(element).attr("value", articleId);
-    form.appendChild(element);
-    document.body.appendChild(form);
-    form.submit();
-    document.body.removeChild(form);
-    
-    return;
-}
-
-function fn_listPops(typeDivCd) {
-    $("div.tab_content div.tabs_item").hide();
-    $("#listPops_" + typeDivCd).show();
-	
-}
-</script>
-
-    <!-- 섹션1 -->
-    <section class="sec1">
-        <h2 class="blind">배너 섹션영역</h2>
-        <div class="inner">
-            <div class="banner">
-                <!-- Swiper -->
-				<div id="divMainBanner" class="swiper MainSwiper">
-					<ul class="swiper-wrapper">
-					
-					<c:if test="${fn:length(listBannerInfos) < 1 }">
-                        <li class="swiper-slide">
-                            <div class="img"><img src="/images/bg/bg-mainbanner.jpg" alt=""></div>
-                            <div class="text">
-                                <h3>온라인 대출/알람예약 서비스를 통해<br>문화원 소장자료들을 만나보세요.</h3>
-                                <p>자료 검색을 통해 원하는 자료를 찾고, 대출/열람 예약 신청까지!<br>온라인에서 쉽고 간편하게 할 수 있습니다.</p>
-                            </div>
-                        </li>	
-					</c:if>
- 
-                     <c:if test="${fn:length(listBannerInfos) > 0 }">
-                    
-                        <c:forEach var="bannerItem" items="${listBannerInfos }">
-                            <li <c:if test="${fn:length(listBannerInfos) > 1 }"> class="swiper-slide" </c:if> >
-                                <div class="img">
-                                    <c:if test="${not empty bannerItem.streFileNm }">
-                                        <img src="/main/bannerImage.do?bannerId=${bannerItem.bannerId }" alt="">
-                                    </c:if>
-                                    <c:if test="${empty bannerItem.streFileNm }">
-                                        <img src="/images/bg/bg-mainbanner.jpg" alt="">
-                                    </c:if>
-                                </div>
-                                <div class="text">
-                                    <h3>${bannerItem.title }</h3>
-                                    <p>${bannerItem.bannerDesc }</p>
-                                    <c:if test="${not empty bannerItem.url }">
-                                    <p><a href="javascript:(0)" onclick="gfn_gotoUrl('${bannerItem.url}')" class="eff">자세히 보기 &#62;</a></p>
-                                    </c:if>
-                                </div>
-                            </li>
-                        </c:forEach>
-                    </c:if>
- 					
-					</ul>
-					<div class="swiper-button-next"></div>
-		      		<div class="swiper-button-prev"></div>
-		      		
-					<div id="divMainBannerPage" class="pagination">
-						<div class="swiper-pagination"></div>
-						<div class="loop-count">
-							<canvas id="swieper-timer" width="32" height="32"></canvas>
-							<button class="remote"><span></span></button>
-						</div>
-					</div>
-				</div>
-			</div>
-			
-            <div class="color-box">
-                <button class="list">
-                    <a href="javascript:void(0);" onclick="location.href = '/inform/selectNCultureOperationInfo.do';" title="이용안내">
-                    <div class="title">이용안내</div>
-                    <div class="icon"><img src="/images/icon/icon-sec1-01.png" alt=""></div>
-                    <div class="open"><img src="/images/icon/icon-plus.png" alt=""></div>
-                    </a>
-                </button>
-                <button class="list">
-                    <a href="javascript:void(0);" onclick="gfn_gotoUrl('/inform/selectNCultureLocationInfo.do')" title="찾아오시는 길">
-                    <div class="title">찾아오시는 길</div>
-                    <div class="icon"><img src="/images/icon/icon-sec1-02.png" alt=""></div>
-                    <div class="open"><img src="/images/icon/icon-plus.png" alt=""></div>
-                    </a>
-                </button>
-                <button class="list">
-                    <a href="javascript:void(0);" onclick="location.href = '/rent/listRentItems.do';" title="대출관리">
-                    <div class="title">대출관리</div>
-                    <div class="icon"><img src="/images/icon/icon-sec1-03.png" alt=""></div>
-                    <div class="open"><img src="/images/icon/icon-plus.png" alt=""></div>
-                    </a>
-                </button>
-                <button class="list">
-                    <a href="javascript:void(0);" onclick="location.href = '/read/listReadItems.do';" title="열람관리">
-                    <div class="title">열람관리</div>
-                    <div class="icon"><img src="/images/icon/icon-sec1-04.png" alt=""></div>
-                    <div class="open"><img src="/images/icon/icon-plus.png" alt=""></div>
-                    </a>
-                </button>
-            </div>
-        </div>
-    </section>
-    
-    <!-- 섹션2 -->
-    <c:if test="${fn:length(listKeywords) > 0 }">
-    <section class="sec2">
-        <h2 class="blind">키워드 섹션영역</h2>
-        <div class="inner">
-            <div class="keyword-box">
-                <h3 class="title"><span>AI 추천</span> 키워드</h3>
-                <p class="desc">어떤 자료들을 소장 중인지 키워드로 살펴보세요!</p>
-                <ul class="list-tag">
-                    <c:forEach var="itemKeyword" items="${listKeywords }">
-                    <li><a href="javascript:void(0)" title="${itemKeyword.keyName }" onclick="fn_search('${itemKeyword.keyName }')">#  ${itemKeyword.keyName }</a>
-                    </li>
-                    </c:forEach>
-                </ul>
-            </div>
-        </div>
-    </section>
-    </c:if>
-     
-    <!-- 섹션3 -->
-    <c:if test="${fn:length(listOrgPicks) > 0 }">
-    <section class="sec3">
-        <h2 class="blind">문화원픽 섹션영역</h2>
-        <div class="inner">
-            <div class="pick-box">
-                <h3 class="title"><span>문화원's</span> Pick</h3>
-                <p class="desc">${mngOrgNm }<c:if test='${fn:endsWith(mngOrgNm, "원") }'>이</c:if><c:if test='${not fn:endsWith(mngOrgNm, "원") }'>가</c:if> 추천하는 자료를 만나보세요!</p>
-                
-                <!-- Swiper -->
-                <div class="swiper pickSwiper">
-                    <div class="swiper-wrapper">
-                    
-                    <c:forEach var="itemPick" items="${listOrgPicks }">
-                    
-                        <div class="swiper-slide">
-                            <div class="list-box">
-                                <div class="images"><a href="javascript:void(0)" onclick="gfn_getDetail('${itemPick.masterId }')" title="상세정보"><img src="${itemPick.rprsThumbUrlWithDefaultMiddle }" alt="${itemPick.title } 표지"></a></div>
-                                <div class="subject">
-                                    <a href="javascript:void(0)" onclick="gfn_getDetail('${itemPick.masterId }')" title="상세정보">
-                                        <span class="block"><span class="cla">${itemPick.typeDivNm }</span></span>
-                                        <span class="tit underline pink">${itemPick.title }</span>
-                                    </a>
-                                </div>
-                            </div>
-                        </div>
-                        
-                    </c:forEach>
-                    
-                    </div>
-                    <div class="swiper-button-next"></div>
-                    <div class="swiper-button-prev"></div>
-                    <div class="swiper-pagination"></div>
-                </div>
-            </div>
-        </div>
-    </section>
-    </c:if>
-    
-    <!-- 섹션4 -->
-    <section class="sec4">
-        <h2 class="blind">중간배너 섹션영역</h2>
-        <div class="inner">
-            <div class="middle-banner">
-                <h3>회원가입만 하면 발급되는<br><strong>간편 온라인 회원증!</strong></h3>
-                <p>문화원 소장자료관 회원가입 시 해당 문화원에서<br>사용할 수 있는 온라인 회원증이 발급됩니다.</p>
-            </div>
-        </div>
-    </section>
-    
-    <!-- 섹션5 -->
-    <c:if test="${fn:length(listPops) > 0 }">
-    <section class="sec5">
-        <h2 class="blind">인기자료 섹션영역</h2>
-        <div class="inner">
-            <h3 class="title"><span>인기</span> 자료</h3>
-            <p class="desc">이런 인기자료들이 있어요!</p>
-            <div class="tab"> 
-
-                <div class="tab_content">
-                    <div class="tabs_item" id="listPops_ALL">
-	                    <div class="swiper popularSwiper">
-	                        <ul class="swiper-wrapper">
-	                            <c:forEach var="itemPop" items="${listPops }">
-	                            <li class="swiper-slide">
-	                                <div class="con-1">
-	                                    <div class="block"><span class="cla">${itemPop.typeDivNm }</span></div>
-	                                    <div class="tit underline pink" onclick="gfn_getDetail('${itemPop.masterId}')">${itemPop.title }</div>
-	                                </div>
-	                                <div class="con-2">
-	                                    <p class="sub"><span>주제분야</span><span><c:if test="${empty itemPop.subjectNm }">-</c:if>${itemPop.subjectNm }</span></p>
-	                                    <p class="age"><span>생산기관</span><span><c:if test="${empty itemPop.orgNm }">-</c:if>${itemPop.orgNm }</span></p>
-	                                    <p class="yea"><span>생산년도</span><span><c:if test="${empty itemPop.creatYyyy }">-</c:if>${itemPop.creatYyyy }</span></p>
-	                                </div>
-	                            </li>
-	                            </c:forEach>
-	                        </ul> 
-	                        <div class="swiper-pagination"></div>
-	                    </div>
-                    </div>
-                </div>
-                
-            </div>
-        </div>
-    </section>
-    </c:if>
-    
-    <!-- 섹션6 -->
-    <c:if test="${fn:length(listOnline) > 0 }">
-    <section class="sec6">
-        <h2 class="blind">온라인자료관 섹션영역</h2>
-        <div class="inner">
-            <h3 class="title"><span>온라인</span> 자료관</h3>
-            <p class="desc">문화원 전자자료를 온라인으로 간편하게 열람해보세요!</p>
-            <!-- Swiper -->
-            <div class="swiper onlineSwiper">
-                <div class="swiper-wrapper items cover">
-                
-                    <c:forEach var="itemOnline" items="${listOnline }">
-                    <div class="swiper-slide">
-                        <div class="List">
-                            <div class="inner">
-                                <div class="thumbnail">
-                                    <span class="image-frame"><img src="${itemOnline.rprsThumbUrlWithDefaultMiddle }" alt="${itemOnline.title } 표지"  /></span>
-                                    <div class="detail-cover">
-                                        <a href="javascript:void(0)" title="상세화면 보기" onclick="gfn_getDetail('${itemOnline.masterId }')" ><strong>${itemOnline.title }</strong></a>
-                                        <ul>
-                                            <li><em>자료유형</em><c:if test="${empty itemOnline.typeDivNm }">-</c:if>${itemOnline.typeDivNm }</li>
-                                            <li><em>주제분야</em><c:if test="${empty itemOnline.subjectNmUp }">-</c:if>${itemOnline.subjectNmUp }</li>
-                                            <li><em>생산기관</em><c:if test="${empty itemOnline.orgNm }">-</c:if>${itemOnline.orgNm }</span></li>
-                                            <li><em>생산년도</em><c:if test="${empty itemOnline.creatYyyy }">-</c:if>${itemOnline.creatYyyy }</li>
-                                        </ul>
-                                        <div class="btn-box">
-                                            <div class="view"><a href="javascript:void(0)" onclick="gfn_showDocPdf('${itemOnline.interfaceId }','${itemOnline.masterId }','${itemOnline.typeDivCd}','${itemOnline.dtlsTypeDivCd}')">원문보기</a></div>
-                                            <div class="RIS"><a href="javascript:void(0)" onclick="risShow('${itemOnline.masterId }')">RIS</a></div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    </c:forEach>
-                </div>
-                <div class="swiper-button-next"></div>
-                <div class="swiper-button-prev"></div>
-                <div class="swiper-pagination"></div>
-            </div>
-            <div class="more-btn"><a href="javascript:void(0)" onclick="location.href='/search/searchList.do?collection=lib_online';"><span><span>더보기</span> <img src="/images/icon/icon-more.png" alt=""></span></a></div>
-        </div>
-    </section>
-    </c:if>
-    
-    <!-- 섹션7 -->
-    <section class="sec7">
-        <h2 class="blind">커뮤니티 섹션영역</h2>
-        <div class="inner">
-            <div class="Fl notice">
-                <div class="ti"><span>공지사항</span></div>
-                <div class="con">
-                    <c:forEach var="itemAncmnt" items="${listAncmnt }">
-                    <div class="list">
-                        <a href="javascript:void(0)" onclick="fn_viewAncmnt('${itemAncmnt.articleId}')">
-                            <div class="box"><p>${fn:substring(itemAncmnt.regDd,8,10) }</p><p> ${fn:substring(itemAncmnt.regDd,2,4) }.${fn:substring(itemAncmnt.regDd,5,7) }</p></div>
-                            <div class="text">
-                                <p><c:if test='${itemAncmnt.notiYn == "Y"}'>[공지]</c:if>${itemAncmnt.title}
-                                   <c:if test='${itemAncmnt.attachYn == "Y"}'><img src="/images/icon/icon-file.png" class="file" alt="파일 아이콘"></c:if></p>
-                            </div>
-                        </a>
-                    </div>
-                    </c:forEach>
-                </div>
-                <div class="more"><a href="javascript:void(0)" onclick="location.href='/bbs/listAncmnts.do';"><span><span>더보기</span> <img src="/images/icon/icon-more.png" alt=""></span></a></div>
-            </div>
-            <div class="Fl qna">
-                <div class="ti"><span>Q&amp;A</span></div>
-                <div class="con">
-                    <c:forEach var="itemQna" items="${listQna }">
-                    <div class="list">
-                        <a href="javascript:void(0)" onclick="fn_viewQna('${itemQna.articleId}', '${itemQna.secretYn}', '${itemQna.myQnaYn}')">
-                            <div class="box"><p>${fn:substring(itemQna.regDd,8,10) }</p><p> ${fn:substring(itemQna.regDd,2,4) }.${fn:substring(itemQna.regDd,5,7) }</p></div>
-                            <div class="text">
-                                <p>${itemQna.title} 
-                                <c:if test='${itemQna.attachYn == "Y"}'><img src="/images/icon/icon-file.png" class="file" alt="파일 아이콘"></c:if>
-                                <c:if test='${itemQna.secretYn == "Y"}'><img src="/images/icon/icon-password.png" class="pw" alt="잠금 아이콘"></c:if>
-                                </p>
-                            </div>
-                            <c:if test='${itemQna.answerYn == "Y"}'>
-                            <div class="answer suc">
-                                <p>답변완료</p>
-                            </div>
-                            </c:if>
-                            <c:if test='${itemQna.answerYn != "Y"}'>
-                            <div class="answer">
-                                <p>답변대기</p>
-                            </div>
-                            </c:if>
-                        </a>
-                    </div>
-                    </c:forEach>
-                </div>
-                <div class="more"><a href="javascript:void(0)" onclick="location.href='/bbs/listQnas.do';"><span><span>더보기</span> <img src="/images/icon/icon-more.png" alt=""></span></a></div>
-            </div>
-        </div>
-    </section>
-
-    <sec:authorize access="isAuthenticated()">
-    <button type="button" id="mo-member-btn" class="member-btn" onclick="fn_getMemberCard();">회원증 보러가기</button>
-    </sec:authorize>
-
-<script>
-	/* 메인슬라이드 */
-	var myswiper = new Swiper(".MainSwiper", {
-	    loop: true,
-	    slidesPerView: 1,
-	    spaceBetween: 0,
-	    centeredSlides: true,
-	    autoplay: {
-	        delay: 4000,
-	        disableOnInteraction: false,
-	    },
-	    navigation: {
-	        nextEl: ".swiper-button-next",
-	        prevEl: ".swiper-button-prev",
-	    },
-	    pagination: {
-			el: '.pagination .swiper-pagination',
-			type: 'fraction',
-		}
-	});
-	
-	$('.remote').click(function () {
-		if($(this).hasClass('restart')){
-			$(this).removeClass('restart');
-			myswiper.autoplay.start();
-		}else{
-			$(this).addClass('restart');
-			myswiper.autoplay.stop();
-		}
-	});
-
-	var windowWidth = $(window).width();
-	var _slidesPerView = 5;
-	var _spaceBetween = 30;
-	if (windowWidth < 480) {
-		_slidesPerView = 1;
-		_spaceBetween = 20;
-	}
-
-	/* 문화원s pick */
-	var swiper = new Swiper(".pickSwiper", {
-		loop : true,
-		slidesPerView : _slidesPerView,
-		spaceBetween : _spaceBetween,
-		centeredSlides : true,
-		autoplay : {
-			delay : 2500,
-			disableOnInteraction : false,
-		},
-		navigation : {
-			nextEl : ".swiper-button-next",
-			prevEl : ".swiper-button-prev",
-		},
-	/*
-	pagination: {
-	    el: ".swiper-pagination",
-	    clickable: true,
-	},
-	 */
-	});
-
-	var _slidesPerViewOnline = 7;
-	if (windowWidth < 480) {
-		_slidesPerViewOnline = 1.5;
-		/* 유형별 인기자료 */
-		var swiper = new Swiper(".popularSwiper", {
-			slidesPerView : 1,
-			spaceBetween : _spaceBetween,
-			centeredSlides : true,
-			pagination : {
-				el : ".swiper-pagination",
-			},
-		});
-	}
-
-	/* 온라인 자료관 */
-	var swiper = new Swiper(".onlineSwiper", {
-		loop : true,
-		slidesPerView : _slidesPerViewOnline,
-		spaceBetween : _spaceBetween,
-		centeredSlides : true,
-		// autoplay: {
-		//     delay: 4000,
-		//     disableOnInteraction: false,
-		// },
-		navigation : {
-			nextEl : ".swiper-button-next",
-			prevEl : ".swiper-button-prev",
-		},
-	/*
-	pagination: {
-	    el: ".swiper-pagination",
-	    clickable: true,
-	},
-	 */
-	});
-</script>
-
-
+<%@ page language="java" contentType="text/html; charset=UTF-8" %>
+<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
+<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
+<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui" %>
+<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
+<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>
+
+<script>
+
+$(document).ready(function() {
+
+    <c:if test="${fn:length(listBannerInfos) < 2  }">
+    $("#divMainBanner").removeClass();
+    $("#divMainBannerPage").remove();
+    </c:if>
+	
+	$("#DIV_PAGE_MAIN").removeClass("sub");
+    var unreadNotiCnt = $(".noti-btn span.count").text();
+    gfn_myAlert(unreadNotiCnt);
+    
+    
+});
+
+function fn_search(keyword) {
+	var form = document.createElement("form");
+	form.style.display = "none";
+	$(form).attr("action", "/search/searchList.do");
+	$(form).attr("method", "post");
+	
+	var element = document.createElement("input");
+	$(element).attr("name", "query");
+	
+	$(element).attr("value", keyword);
+	form.appendChild(element);
+	document.body.appendChild(form);
+	form.submit();
+	document.body.removeChild(form);
+	
+	return;
+}
+
+function fn_viewAncmnt(articleId) {
+    var form = document.createElement("form");
+    form.style.display = "none";
+    $(form).attr("action", "/bbs/selectAncmntArticle.do");
+    $(form).attr("method", "post");
+    
+    var element = document.createElement("input");
+    $(element).attr("name", "articleId");
+    
+    $(element).attr("value", articleId);
+    form.appendChild(element);
+    document.body.appendChild(form);
+    form.submit();
+    document.body.removeChild(form);
+    
+    return;
+}
+
+function fn_viewQna(articleId, secretYn, myQnaYn) {
+	
+    // 비밀글인 경우, 본인에 한하여 조회 가능 
+    if(secretYn == "Y" && myQnaYn == "N") {
+        alert("비공개 게시물은 작성자만 확인할 수 있습니다.");
+        return;
+    }
+    
+    var form = document.createElement("form");
+    form.style.display = "none";
+    $(form).attr("action", "/bbs/selectQnaArticle.do");
+    $(form).attr("method", "post");
+    
+    var element = document.createElement("input");
+    $(element).attr("name", "articleId");
+    
+    $(element).attr("value", articleId);
+    form.appendChild(element);
+    document.body.appendChild(form);
+    form.submit();
+    document.body.removeChild(form);
+    
+    return;
+}
+
+function fn_listPops(typeDivCd) {
+    $("div.tab_content div.tabs_item").hide();
+    $("#listPops_" + typeDivCd).show();
+	
+}
+</script>
+
+    <!-- 섹션1 -->
+    <section class="sec1">
+        <h2 class="blind">배너 섹션영역</h2>
+        <div class="inner">
+            <div class="banner">
+                <!-- Swiper -->
+				<div id="divMainBanner" class="swiper MainSwiper">
+					<ul class="swiper-wrapper">
+					
+					<c:if test="${fn:length(listBannerInfos) < 1 }">
+                        <li class="swiper-slide">
+                            <div class="img"><img src="/images/bg/bg-mainbanner.jpg" alt=""></div>
+                            <div class="text">
+                                <h3>온라인 대출/알람예약 서비스를 통해<br>문화원 소장자료들을 만나보세요.</h3>
+                                <p>자료 검색을 통해 원하는 자료를 찾고, 대출/열람 예약 신청까지!<br>온라인에서 쉽고 간편하게 할 수 있습니다.</p>
+                            </div>
+                        </li>	
+					</c:if>
+ 
+                     <c:if test="${fn:length(listBannerInfos) > 0 }">
+                    
+                        <c:forEach var="bannerItem" items="${listBannerInfos }">
+                            <li <c:if test="${fn:length(listBannerInfos) > 1 }"> class="swiper-slide" </c:if> >
+                                <div class="img">
+                                    <c:if test="${not empty bannerItem.streFileNm }">
+                                        <img src="/main/bannerImage.do?bannerId=${bannerItem.bannerId }" alt="">
+                                    </c:if>
+                                    <c:if test="${empty bannerItem.streFileNm }">
+                                        <img src="/images/bg/bg-mainbanner.jpg" alt="">
+                                    </c:if>
+                                </div>
+                                <div class="text">
+                                    <h3>${bannerItem.title }</h3>
+                                    <p>${bannerItem.bannerDesc }</p>
+                                    <c:if test="${not empty bannerItem.url }">
+                                    <p><a href="javascript:(0)" onclick="gfn_gotoUrl('${bannerItem.url}')" class="eff">자세히 보기 &#62;</a></p>
+                                    </c:if>
+                                </div>
+                            </li>
+                        </c:forEach>
+                    </c:if>
+ 					
+					</ul>
+					
+					<c:if test="${fn:length(listBannerInfos) > 1 }">
+					<div class="swiper-button-next"></div>
+		      		<div class="swiper-button-prev"></div>
+		      		
+					<div id="divMainBannerPage" class="pagination">
+						<div class="swiper-pagination"></div>
+						<div class="loop-count">
+							<canvas id="swieper-timer" width="32" height="32"></canvas>
+							<button class="remote"><span></span></button>
+						</div>
+					</div>
+                    </c:if>
+					
+				</div>
+			</div>
+			
+            <div class="color-box">
+                <button class="list">
+                    <a href="javascript:void(0);" onclick="location.href = '/inform/selectNCultureOperationInfo.do';" title="이용안내">
+                    <div class="title">이용안내</div>
+                    <div class="icon"><img src="/images/icon/icon-sec1-01.png" alt=""></div>
+                    <div class="open"><img src="/images/icon/icon-plus.png" alt=""></div>
+                    </a>
+                </button>
+                <button class="list">
+                    <a href="javascript:void(0);" onclick="gfn_gotoUrl('/inform/selectNCultureLocationInfo.do')" title="찾아오시는 길">
+                    <div class="title">찾아오시는 길</div>
+                    <div class="icon"><img src="/images/icon/icon-sec1-02.png" alt=""></div>
+                    <div class="open"><img src="/images/icon/icon-plus.png" alt=""></div>
+                    </a>
+                </button>
+                <button class="list">
+                    <a href="javascript:void(0);" onclick="location.href = '/rent/listRentItems.do';" title="대출관리">
+                    <div class="title">대출관리</div>
+                    <div class="icon"><img src="/images/icon/icon-sec1-03.png" alt=""></div>
+                    <div class="open"><img src="/images/icon/icon-plus.png" alt=""></div>
+                    </a>
+                </button>
+                <button class="list">
+                    <a href="javascript:void(0);" onclick="location.href = '/read/listReadItems.do';" title="열람관리">
+                    <div class="title">열람관리</div>
+                    <div class="icon"><img src="/images/icon/icon-sec1-04.png" alt=""></div>
+                    <div class="open"><img src="/images/icon/icon-plus.png" alt=""></div>
+                    </a>
+                </button>
+            </div>
+        </div>
+    </section>
+    
+    <!-- 섹션2 -->
+    <c:if test="${fn:length(listKeywords) > 0 }">
+    <section class="sec2">
+        <h2 class="blind">키워드 섹션영역</h2>
+        <div class="inner">
+            <div class="keyword-box">
+                <h3 class="title"><span>AI 추천</span> 키워드</h3>
+                <p class="desc">어떤 자료들을 소장 중인지 키워드로 살펴보세요!</p>
+                <ul class="list-tag">
+                    <c:forEach var="itemKeyword" items="${listKeywords }">
+                    <li><a href="javascript:void(0)" title="${itemKeyword.keyName }" onclick="fn_search('${itemKeyword.keyName }')">#  ${itemKeyword.keyName }</a>
+                    </li>
+                    </c:forEach>
+                </ul>
+            </div>
+        </div>
+    </section>
+    </c:if>
+     
+    <!-- 섹션3 -->
+    <c:if test="${fn:length(listOrgPicks) > 0 }">
+    <section class="sec3">
+        <h2 class="blind">문화원픽 섹션영역</h2>
+        <div class="inner">
+            <div class="pick-box">
+                <h3 class="title"><span>문화원's</span> Pick</h3>
+                <p class="desc">${mngOrgNm }<c:if test='${fn:endsWith(mngOrgNm, "원") }'>이</c:if><c:if test='${not fn:endsWith(mngOrgNm, "원") }'>가</c:if> 추천하는 자료를 만나보세요!</p>
+                
+                <!-- Swiper -->
+                <div class="swiper pickSwiper">
+                    <div class="swiper-wrapper">
+                    
+                    <c:forEach var="itemPick" items="${listOrgPicks }">
+                    
+                        <div class="swiper-slide">
+                            <div class="list-box">
+                                <div class="images"><a href="javascript:void(0)" onclick="gfn_getDetail('${itemPick.masterId }')" title="상세정보"><img src="${itemPick.rprsThumbUrlWithDefaultMiddle }" alt="${itemPick.title } 표지"></a></div>
+                                <div class="subject">
+                                    <a href="javascript:void(0)" onclick="gfn_getDetail('${itemPick.masterId }')" title="상세정보">
+                                        <span class="block"><span class="cla">${itemPick.typeDivNm }</span></span>
+                                        <span class="tit underline pink">${itemPick.title }</span>
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                        
+                    </c:forEach>
+                    
+                    </div>
+                    <div class="swiper-button-next"></div>
+                    <div class="swiper-button-prev"></div>
+                    <div class="swiper-pagination"></div>
+                </div>
+            </div>
+        </div>
+    </section>
+    </c:if>
+    
+    <!-- 섹션4 -->
+    <section class="sec4">
+        <h2 class="blind">중간배너 섹션영역</h2>
+        <div class="inner">
+            <div class="middle-banner">
+                <h3>회원가입만 하면 발급되는<br><strong>간편 온라인 회원증!</strong></h3>
+                <p>문화원 소장자료관 회원가입 시 해당 문화원에서<br>사용할 수 있는 온라인 회원증이 발급됩니다.</p>
+            </div>
+        </div>
+    </section>
+    
+    <!-- 섹션5 -->
+    <c:if test="${fn:length(listPops) > 0 }">
+    <section class="sec5">
+        <h2 class="blind">인기자료 섹션영역</h2>
+        <div class="inner">
+            <h3 class="title"><span>인기</span> 자료</h3>
+            <p class="desc">이런 인기자료들이 있어요!</p>
+            <div class="tab"> 
+
+                <div class="tab_content">
+                    <div class="tabs_item" id="listPops_ALL">
+	                    <div class="swiper popularSwiper">
+	                        <ul class="swiper-wrapper">
+	                            <c:forEach var="itemPop" items="${listPops }">
+	                            <li class="swiper-slide">
+	                                <div class="con-1">
+	                                    <div class="block"><span class="cla">${itemPop.typeDivNm }</span></div>
+	                                    <div class="tit underline pink" onclick="gfn_getDetail('${itemPop.masterId}')">${itemPop.title }</div>
+	                                </div>
+	                                <div class="con-2">
+	                                    <p class="sub"><span>주제분야</span><span><c:if test="${empty itemPop.subjectNm }">-</c:if>${itemPop.subjectNm }</span></p>
+	                                    <p class="age"><span>생산기관</span><span><c:if test="${empty itemPop.orgNm }">-</c:if>${itemPop.orgNm }</span></p>
+	                                    <p class="yea"><span>생산년도</span><span><c:if test="${empty itemPop.creatYyyy }">-</c:if>${itemPop.creatYyyy }</span></p>
+	                                </div>
+	                            </li>
+	                            </c:forEach>
+	                        </ul> 
+	                        <div class="swiper-pagination"></div>
+	                    </div>
+                    </div>
+                </div>
+                
+            </div>
+        </div>
+    </section>
+    </c:if>
+    
+    <!-- 섹션6 -->
+    <c:if test="${fn:length(listOnline) > 0 }">
+    <section class="sec6">
+        <h2 class="blind">온라인자료관 섹션영역</h2>
+        <div class="inner">
+            <h3 class="title"><span>온라인</span> 자료관</h3>
+            <p class="desc">문화원 전자자료를 온라인으로 간편하게 열람해보세요!</p>
+            <!-- Swiper -->
+            <div class="swiper onlineSwiper">
+                <div class="swiper-wrapper items cover">
+                
+                    <c:forEach var="itemOnline" items="${listOnline }">
+                    <div class="swiper-slide">
+                        <div class="List">
+                            <div class="inner">
+                                <div class="thumbnail">
+                                    <span class="image-frame"><img src="${itemOnline.rprsThumbUrlWithDefaultMiddle }" alt="${itemOnline.title } 표지"  /></span>
+                                    <div class="detail-cover">
+                                        <a href="javascript:void(0)" title="상세화면 보기" onclick="gfn_getDetail('${itemOnline.masterId }')" ><strong>${itemOnline.title }</strong></a>
+                                        <ul>
+                                            <li><em>자료유형</em><c:if test="${empty itemOnline.typeDivNm }">-</c:if>${itemOnline.typeDivNm }</li>
+                                            <li><em>주제분야</em><c:if test="${empty itemOnline.subjectNmUp }">-</c:if>${itemOnline.subjectNmUp }</li>
+                                            <li><em>생산기관</em><c:if test="${empty itemOnline.orgNm }">-</c:if>${itemOnline.orgNm }</span></li>
+                                            <li><em>생산년도</em><c:if test="${empty itemOnline.creatYyyy }">-</c:if>${itemOnline.creatYyyy }</li>
+                                        </ul>
+                                        <div class="btn-box">
+                                            <div class="view"><a href="javascript:void(0)" onclick="gfn_showDocPdf('${itemOnline.interfaceId }','${itemOnline.masterId }','${itemOnline.typeDivCd}','${itemOnline.dtlsTypeDivCd}')">원문보기</a></div>
+                                            <div class="RIS"><a href="javascript:void(0)" onclick="risShow('${itemOnline.masterId }')">RIS</a></div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    </c:forEach>
+                </div>
+                <div class="swiper-button-next"></div>
+                <div class="swiper-button-prev"></div>
+                <div class="swiper-pagination"></div>
+            </div>
+            <div class="more-btn"><a href="javascript:void(0)" onclick="location.href='/search/searchList.do?collection=lib_online';"><span><span>더보기</span> <img src="/images/icon/icon-more.png" alt=""></span></a></div>
+        </div>
+    </section>
+    </c:if>
+    
+    <!-- 섹션7 -->
+    <section class="sec7">
+        <h2 class="blind">커뮤니티 섹션영역</h2>
+        <div class="inner">
+            <div class="Fl notice">
+                <div class="ti"><span>공지사항</span></div>
+                <div class="con">
+                    <c:forEach var="itemAncmnt" items="${listAncmnt }">
+                    <div class="list">
+                        <a href="javascript:void(0)" onclick="fn_viewAncmnt('${itemAncmnt.articleId}')">
+                            <div class="box"><p>${fn:substring(itemAncmnt.regDd,8,10) }</p><p> ${fn:substring(itemAncmnt.regDd,2,4) }.${fn:substring(itemAncmnt.regDd,5,7) }</p></div>
+                            <div class="text">
+                                <p><c:if test='${itemAncmnt.notiYn == "Y"}'>[공지]</c:if>${itemAncmnt.title}
+                                   <c:if test='${itemAncmnt.attachYn == "Y"}'><img src="/images/icon/icon-file.png" class="file" alt="파일 아이콘"></c:if></p>
+                            </div>
+                        </a>
+                    </div>
+                    </c:forEach>
+                </div>
+                <div class="more"><a href="javascript:void(0)" onclick="location.href='/bbs/listAncmnts.do';"><span><span>더보기</span> <img src="/images/icon/icon-more.png" alt=""></span></a></div>
+            </div>
+            <div class="Fl qna">
+                <div class="ti"><span>Q&amp;A</span></div>
+                <div class="con">
+                    <c:forEach var="itemQna" items="${listQna }">
+                    <div class="list">
+                        <a href="javascript:void(0)" onclick="fn_viewQna('${itemQna.articleId}', '${itemQna.secretYn}', '${itemQna.myQnaYn}')">
+                            <div class="box"><p>${fn:substring(itemQna.regDd,8,10) }</p><p> ${fn:substring(itemQna.regDd,2,4) }.${fn:substring(itemQna.regDd,5,7) }</p></div>
+                            <div class="text">
+                                <p>${itemQna.title} 
+                                <c:if test='${itemQna.attachYn == "Y"}'><img src="/images/icon/icon-file.png" class="file" alt="파일 아이콘"></c:if>
+                                <c:if test='${itemQna.secretYn == "Y"}'><img src="/images/icon/icon-password.png" class="pw" alt="잠금 아이콘"></c:if>
+                                </p>
+                            </div>
+                            <c:if test='${itemQna.answerYn == "Y"}'>
+                            <div class="answer suc">
+                                <p>답변완료</p>
+                            </div>
+                            </c:if>
+                            <c:if test='${itemQna.answerYn != "Y"}'>
+                            <div class="answer">
+                                <p>답변대기</p>
+                            </div>
+                            </c:if>
+                        </a>
+                    </div>
+                    </c:forEach>
+                </div>
+                <div class="more"><a href="javascript:void(0)" onclick="location.href='/bbs/listQnas.do';"><span><span>더보기</span> <img src="/images/icon/icon-more.png" alt=""></span></a></div>
+            </div>
+        </div>
+    </section>
+
+    <sec:authorize access="isAuthenticated()">
+    <button type="button" id="mo-member-btn" class="member-btn" onclick="fn_getMemberCard();">회원증 보러가기</button>
+    </sec:authorize>
+
+<script>
+	/* 메인슬라이드 */
+	var myswiper = new Swiper(".MainSwiper", {
+	    loop: true,
+	    slidesPerView: 1,
+	    spaceBetween: 0,
+	    centeredSlides: true,
+	    autoplay: {
+	        delay: 4000,
+	        disableOnInteraction: false,
+	    },
+	    navigation: {
+	        nextEl: ".swiper-button-next",
+	        prevEl: ".swiper-button-prev",
+	    },
+	    pagination: {
+			el: '.pagination .swiper-pagination',
+			type: 'fraction',
+		}
+	});
+	
+	$('.remote').click(function () {
+		if($(this).hasClass('restart')){
+			$(this).removeClass('restart');
+			myswiper.autoplay.start();
+		}else{
+			$(this).addClass('restart');
+			myswiper.autoplay.stop();
+		}
+	});
+
+	var windowWidth = $(window).width();
+	var _slidesPerView = 5;
+	var _spaceBetween = 30;
+	if (windowWidth < 480) {
+		_slidesPerView = 1;
+		_spaceBetween = 20;
+	}
+
+	/* 문화원s pick */
+	var swiper = new Swiper(".pickSwiper", {
+		loop : true,
+		slidesPerView : _slidesPerView,
+		spaceBetween : _spaceBetween,
+		centeredSlides : true,
+		autoplay : {
+			delay : 2500,
+			disableOnInteraction : false,
+		},
+		navigation : {
+			nextEl : ".swiper-button-next",
+			prevEl : ".swiper-button-prev",
+		},
+	/*
+	pagination: {
+	    el: ".swiper-pagination",
+	    clickable: true,
+	},
+	 */
+	});
+
+	var _slidesPerViewOnline = 7;
+	if (windowWidth < 480) {
+		_slidesPerViewOnline = 1.5;
+		/* 유형별 인기자료 */
+		var swiper = new Swiper(".popularSwiper", {
+			slidesPerView : 1,
+			spaceBetween : _spaceBetween,
+			centeredSlides : true,
+			pagination : {
+				el : ".swiper-pagination",
+			},
+		});
+	}
+
+	/* 온라인 자료관 */
+	var swiper = new Swiper(".onlineSwiper", {
+		loop : true,
+		slidesPerView : _slidesPerViewOnline,
+		spaceBetween : _spaceBetween,
+		centeredSlides : true,
+		// autoplay: {
+		//     delay: 4000,
+		//     disableOnInteraction: false,
+		// },
+		navigation : {
+			nextEl : ".swiper-button-next",
+			prevEl : ".swiper-button-prev",
+		},
+	/*
+	pagination: {
+	    el: ".swiper-pagination",
+	    clickable: true,
+	},
+	 */
+	});
+</script>
+
+