<%@ 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 type="text/javascript">

$(document).ready(function() {
    var unreadNotiCnt = $(".noti-btn span.count").text();
    fn_myAlert(unreadNotiCnt);
});

</script>

    <!-- 섹션1 -->
    <section class="sec1">
        <h2 class="blind">배너 섹션영역</h2>
        <div class="inner">
            <div class="banner">
                <h3>온라인 대출/알람예약 서비스를 통해<br>문화원 소장자료들을 만나보세요.</h3>
                <p>자료 검색을 통해 원하는 자료를 찾고, 대출/열람 예약 신청까지!<br>온라인에서 쉽고 간편하게 할 수 있습니다.</p>
            </div>
            <div class="color-box">
                <div class="list">
                    <a href="javascript:void(0);" onclick="location.href = '/inform/selectNCultureOperationInfo.do';"></a>
                    <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>
                </div>
                <div class="list">
                    <a href="javascript:void(0);" onclick="location.href = '/inform/selectNCultureLocationInfo.do';"></a>
                    <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>
                </div>
                <div class="list">
                    <a href="javascript:void(0);" onclick="location.href = '/rent/listRentItems.do';"></a>
                    <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>
                </div>
                <div class="list">
                    <a href="javascript:void(0);" onclick="location.href = '/rent/listRequestsForViewingItem.do';"></a>
                    <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>
                </div>
            </div>
        </div>
    </section>
    
    <!-- 섹션2 -->
    <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">
                    <li><a href="/" title="">#경주</a></li>
                    <li><a href="/" title="">#경주문화재</a></li>
                    <li><a href="/" title="">#불국사</a></li>
                    <li><a href="/" title="">#보양음식</a></li>
                    <li><a href="/" title="">#삼계탕</a></li>
                    <li><a href="/" title="">#전통음식</a></li>
                    <li><a href="/" title="">#경주문화원</a></li>
                    <li><a href="/" title="">#경주</a></li>
                    <li><a href="/" title="">#경주문화재</a></li>
                    <li><a href="/" title="">#불국사</a></li>
                    <li><a href="/" title="">#보양음식</a></li>
                    <li><a href="/" title="">#삼계탕</a></li>
                    <li><a href="/" title="">#전통음식</a></li>
                    <li><a href="/" title="">#경주문화원</a></li>
                    <li><a href="/" title="">#경주</a></li>
                    <li><a href="/" title="">#경주문화재</a></li>
                    <li><a href="/" title="">#경주문화원</a></li>
                    <li><a href="/" title="">#경주</a></li>
                    <li><a href="/" title="">#경주문화재</a></li>
                    <li><a href="/" title="">#불국사</a></li>
                    <li><a href="/" title="">#보양음식</a></li>
                    <li><a href="/" title="">#삼계탕</a></li>
                    <li><a href="/" title="">#전통음식</a></li>
                    <li><a href="/" title="">#경주문화원</a></li>
                    <li><a href="/" title="">#경주</a></li>
                    <li><a href="/" title="">#경주문화재</a></li>
                    <li><a href="/" title="">#전통음식</a></li>
                    <li><a href="/" title="">#경주문화원</a></li>
                    <li><a href="/" title="">#경주</a></li>
                    <li><a href="/" title="">#경주문화재</a></li>
                </ul>
            </div>
        </div>
    </section>
    
    <!-- 섹션3 -->
    <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">경주문화원이 추천하는 자료를 만나보세요!</p>
                
                <!-- Swiper -->
                <div class="swiper pickSwiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="list-box">
                                <div class="images"><a href="/" title=""><img src="/images/img/img-sec3-01.jpg" alt=""></a></div>
                                <div class="subject">
                                    <a href="/" title="">
                                        <span class="block"><span class="cla">도서간행물</span></span>
                                        <span class="tit underline pink">양산예찬문집</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="list-box">
                                <div class="images"><a href="/" title=""><img src="/images/img/img-sec3-01.jpg" alt=""></a></div>
                                <div class="subject">
                                    <a href="/" title="">
                                        <span class="block"><span class="cla">문서</span></span>
                                        <span class="tit underline pink">三憂堂 文益漸先生 棉花展示館 竣工記念詩集</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="list-box">
                                <div class="images"><a href="/" title=""><img src="/images/img/img-sec3-01.jpg" alt=""></a></div>
                                <div class="subject">
                                    <a href="/" title="">
                                        <span class="block"><span class="cla">박물</span></span>
                                        <span class="tit underline pink">국역 慶州郡 (국역 경주군)</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="list-box">
                                <div class="images"><a href="/" title=""><img src="/images/img/img-sec3-01.jpg" alt=""></a></div>
                                <div class="subject">
                                    <a href="/" title="">
                                        <span class="block"><span class="cla">사진필름류</span></span>
                                        <span class="tit underline pink">경주읍성 남문 장례문의 문루</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="list-box">
                                <div class="images"><a href="/" title=""><img src="/images/img/img-sec3-01.jpg" alt=""></a></div>
                                <div class="subject">
                                    <a href="/" title="">
                                        <span class="block"><span class="cla">도면/지도</span></span>
                                        <span class="tit underline pink">慶州 風物 地理誌 (경주 풍물 지리지)</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- 섹션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 -->
    <section class="sec5">
        <h2 class="blind">인기자료 섹션영역</h2>
        <div class="inner">
            <h3 class="title"><span>유형별</span> 인기자료</h3>
            <p class="desc">자료유형별로 이런 인기자료들이 있어요!</p>
            <div class="tab">
                <ul class="tabs">
                    <li><a href="#">문서</a></li>
                    <li><a href="#">도면/지도</a></li>
                    <li><a href="#">사진필름류</a></li>
                    <li><a href="#">녹음동영상</a></li>
                    <li><a href="#">도서간행물</a></li>
                    <li><a href="#">박물</a></li>
                    <li><a href="#">웹정보자료</a></li>
                </ul>
                <div class="tab_content">
                    <div class="tabs_item">
                        <ul>
                            <li>
                                <div class="con-1">
                                    <div class="block"><span class="cla">문서</span></div>
                                    <div class="tit underline pink">국역 경주읍지</div>
                                </div>
                                <div class="con-2">
                                    <p class="sub"><span>주제분야</span><span>자연과지리 &gt; 자연환경</span></p>
                                    <p class="age"><span>생산기관</span><span>경북경주문화원</span></p>
                                    <p class="yea"><span>생산년도</span><span>2003</span></p>
                                </div>
                            </li>
                            <li>
                                <div class="con-1">
                                    <div class="block"><span class="cla">문서</span></div>
                                    <div class="tit underline pink">慶州文化論叢(경주문화논총)/제20집</div>
                                </div>
                                <div class="con-2">
                                    <p class="sub"><span>주제분야</span><span>문화유산 &gt; 선사 유적 및 유물</span></p>
                                    <p class="age"><span>생산기관</span><span>경북경주문화원</span></p>
                                    <p class="yea"><span>생산년도</span><span>2017</span></p>
                                </div>
                            </li>
                            <li>
                                <div class="con-1">
                                    <div class="block"><span class="cla">문서</span></div>
                                    <div class="tit underline pink">慶州지방 古書 調査 目錄 (경주지방 고서</div>
                                </div>
                                <div class="con-2">
                                    <p class="sub"><span>주제분야</span><span>자연과지리 &gt; 자연환경</span></p>
                                    <p class="age"><span>생산기관</span><span>경북경주문화원</span></p>
                                    <p class="yea"><span>생산년도</span><span>2017</span></p>
                                </div>
                            </li>
                            <li>
                                <div class="con-1">
                                    <div class="block"><span class="cla">문서</span></div>
                                    <div class="tit underline pink">경주문화원 50년사</div>
                                </div>
                                <div class="con-2">
                                    <p class="sub"><span>주제분야</span><span>자연과지리 &gt; 자연환경</span></p>
                                    <p class="age"><span>생산기관</span><span>경북경주문화원</span></p>
                                    <p class="yea"><span>생산년도</span><span>2014</span></p>
                                </div>
                            </li>
                        </ul>    
                    </div>

                    <div class="tabs_item">
                        02
                    </div>
                    
                    <div class="tabs_item">
                        03
                    </div>
                    
                    <div class="tabs_item">
                        04
                    </div>
                    
                    <div class="tabs_item">
                        05
                    </div>
                    
                    <div class="tabs_item">
                        06
                    </div>
                    
                    <div class="tabs_item">
                        07
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- 섹션6 -->
    <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">
                    <div class="swiper-slide">
                        <div class="List">
                            <div class="inner">
                                <div class="thumbnail">
                                    <span class="image-frame"><img src="/images/img/img-sec6-01.jpg" alt=""/></span>
                                    <div class="detail-cover">
                                        <strong>2011 신라문화스토리텔러 교육교재 이론</strong>
                                        <ul>
                                            <li><em>주제유형</em>도서간행물</li>
                                            <li><em>주제분야</em>문화유산</li>
                                            <li><em>생산기관</em>마포문화원</li>
                                            <li><em>생산년도</em>미상</li>
                                        </ul>
                                        <div class="btn-box">
                                            <div class="view"><a href="#">원문보기</a></div>
                                            <div class="RIS"><a href="#">RIS</a></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="List">
                            <div class="inner">
                                <div class="thumbnail">
                                    <span class="image-frame"><img src="/images/img/img-sec6-01.jpg" alt=""/></span>
                                    <div class="detail-cover">
                                        <strong>2011 신라문화스토리텔러 교육교재 이론</strong>
                                        <ul>
                                            <li><em>주제유형</em>도서간행물</li>
                                            <li><em>주제분야</em>문화유산</li>
                                            <li><em>생산기관</em>마포문화원</li>
                                            <li><em>생산년도</em>미상</li>
                                        </ul>
                                        <div class="btn-box">
                                            <div class="view"><a href="#">원문보기</a></div>
                                            <div class="RIS"><a href="#">RIS</a></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="List">
                            <div class="inner">
                                <div class="thumbnail">
                                    <span class="image-frame"><img src="/images/img/img-sec6-01.jpg" alt=""/></span>
                                    <div class="detail-cover">
                                        <strong>2011 신라문화스토리텔러 교육교재 이론</strong>
                                        <ul>
                                            <li><em>주제유형</em>도서간행물</li>
                                            <li><em>주제분야</em>문화유산</li>
                                            <li><em>생산기관</em>마포문화원</li>
                                            <li><em>생산년도</em>미상</li>
                                        </ul>
                                        <div class="btn-box">
                                            <div class="view"><a href="#">원문보기</a></div>
                                            <div class="RIS"><a href="#">RIS</a></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="List">
                            <div class="inner">
                                <div class="thumbnail">
                                    <span class="image-frame"><img src="/images/img/img-sec6-01.jpg" alt=""/></span>
                                    <div class="detail-cover">
                                        <strong>2011 신라문화스토리텔러 교육교재 이론</strong>
                                        <ul>
                                            <li><em>주제유형</em>도서간행물</li>
                                            <li><em>주제분야</em>문화유산</li>
                                            <li><em>생산기관</em>마포문화원</li>
                                            <li><em>생산년도</em>미상</li>
                                        </ul>
                                        <div class="btn-box">
                                            <div class="view"><a href="#">원문보기</a></div>
                                            <div class="RIS"><a href="#">RIS</a></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="List">
                            <div class="inner">
                                <div class="thumbnail">
                                    <span class="image-frame"><img src="/images/img/img-sec6-01.jpg" alt=""/></span>
                                    <div class="detail-cover">
                                        <strong>2011 신라문화스토리텔러 교육교재 이론</strong>
                                        <ul>
                                            <li><em>주제유형</em>도서간행물</li>
                                            <li><em>주제분야</em>문화유산</li>
                                            <li><em>생산기관</em>마포문화원</li>
                                            <li><em>생산년도</em>미상</li>
                                        </ul>
                                        <div class="btn-box">
                                            <div class="view"><a href="#">원문보기</a></div>
                                            <div class="RIS"><a href="#">RIS</a></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="List">
                            <div class="inner">
                                <div class="thumbnail">
                                    <span class="image-frame"><img src="/images/img/img-sec6-01.jpg" alt=""/></span>
                                    <div class="detail-cover">
                                        <strong>2011 신라문화스토리텔러 교육교재 이론</strong>
                                        <ul>
                                            <li><em>주제유형</em>도서간행물</li>
                                            <li><em>주제분야</em>문화유산</li>
                                            <li><em>생산기관</em>마포문화원</li>
                                            <li><em>생산년도</em>미상</li>
                                        </ul>
                                        <div class="btn-box">
                                            <div class="view"><a href="#">원문보기</a></div>
                                            <div class="RIS"><a href="#">RIS</a></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="List">
                            <div class="inner">
                                <div class="thumbnail">
                                    <span class="image-frame"><img src="/images/img/img-sec6-01.jpg" alt=""/></span>
                                    <div class="detail-cover">
                                        <strong>2011 신라문화스토리텔러 교육교재 이론</strong>
                                        <ul>
                                            <li><em>주제유형</em>도서간행물</li>
                                            <li><em>주제분야</em>문화유산</li>
                                            <li><em>생산기관</em>마포문화원</li>
                                            <li><em>생산년도</em>미상</li>
                                        </ul>
                                        <div class="btn-box">
                                            <div class="view"><a href="#">원문보기</a></div>
                                            <div class="RIS"><a href="#">RIS</a></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="List">
                            <div class="inner">
                                <div class="thumbnail">
                                    <span class="image-frame"><img src="/images/img/img-sec6-01.jpg" alt=""/></span>
                                    <div class="detail-cover">
                                        <strong>2011 신라문화스토리텔러 교육교재 이론</strong>
                                        <ul>
                                            <li><em>주제유형</em>도서간행물</li>
                                            <li><em>주제분야</em>문화유산</li>
                                            <li><em>생산기관</em>마포문화원</li>
                                            <li><em>생산년도</em>미상</li>
                                        </ul>
                                        <div class="btn-box">
                                            <div class="view"><a href="#">원문보기</a></div>
                                            <div class="RIS"><a href="#">RIS</a></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
    </section>
    
    <!-- 섹션7 -->
    <section class="sec7">
        <h2 class="blind">커뮤니티 섹션영역</h2>
        <div class="inner">
            <div class="Fl notice">
                <div class="ti"><span>공지사항</span><a href="javascript:void(0)" onclick="location.href='/bbs/listAncmnts.do';"><span>더보기 <img src="/images/icon/icon-more.png" alt="더보기 아이콘"></span></a></div>
                <div class="con">
                    <div class="list">
                        <a href="#">
                            <div class="box"><p>05</p><p>21.09</p></div>
                            <div class="text">
                                <p>[공지] 경주문화원에 오신걸 환영합니다.<img src="/images/icon/icon-file.png" class="file" alt="파일 아이콘"></p>
                            </div>
                        </a>
                    </div>
                    <div class="list">
                        <a href="#">
                            <div class="box"><p>05</p><p>21.09</p></div>
                            <div class="text">
                                <p>소장자료관 이용 시 주의사항 안내<img src="/images/icon/icon-file.png" class="file" alt="파일 아이콘"></p>
                            </div>
                        </a>
                    </div>
                    <div class="list">
                        <a href="#">
                            <div class="box"><p>05</p><p>21.09</p></div>
                            <div class="text">
                                <p>[공지] 2021 문화원 휴관일 안내 드립니다.</p>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            <div class="Fl qna">
                <div class="ti"><span>Q&amp;A</span><a href="javascript:void(0)" onclick="location.href='/bbs/listQnas.do';"><span>더보기 <img src="/images/icon/icon-more.png" alt="더보기 아이콘"></span></a></div>
                <div class="con">
                    <div class="list">
                        <a href="#">
                            <div class="box"><p>05</p><p>21.09</p></div>
                            <div class="text">
                                <p>[공지] 경주문화원에 오신걸 환영합니다.<img src="/images/icon/icon-password.png" class="pw" alt="잠금 아이콘"></p>
                            </div>
                            <div class="answer">
                                <p>답변대기</p>
                            </div>
                        </a>
                    </div>
                    <div class="list">
                        <a href="#">
                            <div class="box"><p>05</p><p>21.09</p></div>
                            <div class="text">
                                <p>소장자료관 이용 시 주의사항 안내<img src="/images/icon/icon-password.png" class="pw" alt="잠금 아이콘"></p>
                            </div>
                            <div class="answer">
                                <p>답변대기</p>
                            </div>
                        </a>
                    </div>
                    <div class="list">
                        <a href="#">
                            <div class="box"><p>05</p><p>21.09</p></div>
                            <div class="text">
                                <p>[공지] 2021 문화원 휴관일 안내 드립니다.</p>
                            </div>
                            <div class="answer suc">
                                <p>답변완료</p>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>


<script>
/* 문화원s pick */
var swiper = new Swiper(".pickSwiper", {
    loop: true,
    slidesPerView: 5,
    spaceBetween: 30,
    centeredSlides: true,
    autoplay: {
        delay: 2500,
        disableOnInteraction: false,
    },
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    /*
    pagination: {
        el: ".swiper-pagination",
        clickable: true,
    },
    */
});
/* 온라인 자료관 */
var swiper = new Swiper(".onlineSwiper", {
    loop: true,
    slidesPerView: 7,
    spaceBetween: 30,
    centeredSlides: true,
    autoplay: {
        delay: 4000,
        disableOnInteraction: false,
    },
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    /*
    pagination: {
        el: ".swiper-pagination",
        clickable: true,
    },
    */
});
</script>

      
<section class="sec5">

&nbsp;<br>
&nbsp;<br>
<h2>테스트를 위한 Windows hosts 파일 변경 안내</h2><br>
관리자 권한으로 메모장을 실행한 후, C:\Windows\System32\drivers\etc\hosts 파일을 열고 다음의 테스트에 맞게 수정하여 테스트 수행  
&nbsp;<br>
&nbsp;<br>

# 로컬PC 테스트용 문화원<br> 
127.0.0.1 seoul.nculture.org<br>
127.0.0.1 seoul2.nculture.org<br>
&nbsp;<br>
# 개발서버 테스트용 문화원 <br> 
210.181.197.70 mapo-dev.nculture.org<br>
210.181.197.70 jongro-dev.nculture.org<br>
&nbsp;<br>
# 로컬PC 테스트용할 경우 주석 제거<br> 
#127.0.0.1 nlib-dev.nculture.org<br>
&nbsp;<br>

</section>

