<%
/**
 * <pre>
 * @Class Name : selectItemInfo.jsp
 * 
 * @Description : 소장자료 상세내용을 조회한다.
 * 
 * 
 * @프로젝트명: 지방문화원 통합자료관리시스템 구축사업 (2021)
 *
 * </pre>
 *
 * @ ------------    --------    ---------------------------
 * @ 수정일                     수정자             수정내용
 * @ ------------    --------    ---------------------------
 * @ 2021. 7. 30.    JSYOO       최초 생성
 * @ 2021.10. 28.    KNKIM       대출예약, 방문열람신청, 카트담기 연결 처리 
 *
 * 
 * @author 이씨플라자 * DIGITALSHIP JSYOO
 * @since 2021. 7. 30.
 * @version 1.0
 *
 */
 %>
<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="validator" uri="http://www.springmodules.org/tags/commons-validator" %>

<c:set var="pageTitle">자료 상세</c:set>

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="format-detection" content="telephone=no" />
<title>소장자료관 - 소장자료 상세페이지</title>

<link rel="shortcut icon" type="image/x-icon" href="#">
<link href="/css/common.css" rel="stylesheet">
<link href="/css/jquery.mCustomScrollbar.css" rel="stylesheet">
<link href="/css/swiper.min.css" rel="stylesheet">
<link href="/css/default.css" rel="stylesheet">

<script src="/js/jquery-1.11.2.min.js"></script>
<script src="/js/jquery.mCustomScrollbar.js"></script>
<script src="/js/swiper.min.js"></script>
<script src="/js/default.js"></script>
</head>
<body>

<div class="wrap sub">
    <!-- 소장자료 상세페이지 섹션 -->
    <div class="data detail">
        <h2 class="blind">소장자료 상세페이지 섹션영역</h2>
        <div class="inner">
            <div class="row-top">
                <div class="center">
                    <div class="left">
                        <div class="cla">
                            <div class="con-1">
                                <c:if test="${(!empty result.openDivCd) && (result.openDivCd ne '3') }">
                                   <span class="online">온라인열람</span>
                                </c:if>
                                <c:if test="${(!empty result.operOutRangeCd) && (result.operOutRangeCd ne '02')}">
                                   <span class="loan">대출</span>
                                </c:if>
                                <c:if test="${(!empty result.operReadRangeCd) && (result.operReadRangeCd ne '03')}">
                                   <span class="visit">방문열람</span>
                                </c:if>
                                <c:if test="${!((!empty result.openDivCd) && (result.openDivCd ne '3')) && !((!empty result.operOutRangeCd) && (result.operOutRangeCd ne '02')) && !((!empty result.operReadRangeCd) && (result.operReadRangeCd ne '03')) }">
                                   <span class="etc">기타</span>
                                </c:if>
                            </div>
                            <div class="con-2">
                                <span class="code"><c:out value="${result.mngtNo}"/></span>
                            </div>
                        </div>
                        <div class="tit"><c:out value="${result.title}"/></div>
                        <div class="img"><img src="<c:out value="${result.rprsThumbUrl}"/>" alt="썸네일"></div>
                    </div>
                    <div class="right">
                        <div class="con-1">
                            <button type="button" class="view">원문보기</button>
                            <button type="button" class="ris" onclick="risShow('<c:out value="${result.masterId}"/>')";>RIS</button>
                            <button type="button" class="favorit">즐겨찾기</button>
                            <button type="button" class="share">공유</button>
                        </div>
                        <div class="con-2">
                            <div class="de-data">
                                <ul>
                                    <li>
                                        <span>자료유형</span>
                                        <span><c:out value="${result.typeCodeNm}"/> &#62; <c:out value="${result.dtlsTypeDivNm}"/></span>
                                    </li>
                                    <li>
                                        <span>연대</span>
                                        <span><c:out value="${result.chronologicalCodeStartNm}"/>년부터 <c:out value="${result.chronologicalCodeEndNm}"/>까지</span>
                                    </li>
                                    <li>
                                        <span>주제분야</span>
                                        <span><c:out value="${result.subjectNmUp}"/> &#62; <c:out value="${result.subjectNm}"/></span>
                                    </li>
                                    <li>
                                        <span>저자</span>
                                        <span><c:out value="${result.bookAuthor}"/></span>
                                    </li>
                                    <li>
                                        <span>생산기관</span>
                                        <span><c:out value="${result.orgNm}"/></span>
                                    </li>
                                    <li>
                                        <span>출판사</span>
                                        <span><c:out value="${result.bookPublisher}"/></span>
                                    </li>
                                    <li>
                                        <span>생산년도</span>
                                        <span><c:out value="${result.creatYyyy}"/></span>
                                    </li>
                                    <li>
                                        <span>발간유형</span>
                                        <span><c:out value="${result.bookPlbcTypeNm}"/></span>
                                    </li>
                                    <li>
                                        <span>테마</span>
                                        <span><c:out value="${result.themeCodeNm}"/></span>
                                    </li>
                                    <li>
                                        <span>발간매체</span>
                                        <span><c:out value="${result.bookPlbcMda}"/></span>
                                    </li>
                                    <li>
                                        <span>시대</span>
                                        <span><c:out value="${result.ageCodeNm}"/></span>
                                    </li>
                                    <li>
                                        <span>청구기호</span>
                                        <span><c:out value="${result.bookCallNo}"/></span>
                                    </li>
                                </ul>
                            </div>
                            <div class="b-btn">
                                <button type="button" class="btn btn-color" onclick="fn_gotoRent()">대출예약</button>
                                <button type="button" class="btn btn-green" onclick="fn_gotoRead()">방문열람신청</button>
                                <button type="button" class="btn btn-orange" onclick="fn_addRentCart('${result.masterId}')">카트담기</button>
                            </div>
                            <div class="keyword">
                                <span class="first">키워드</span>
                                <span><c:out value="${result.keyword}"/>1</span>
                                <span>경주</span>
                                <span>문화인</span>
                                <span>인물</span>
                                <span>석불</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="contents row-bottom">
                <div class="con-1">
                    <div class="list-box">
                        <div class="list">
                            <div class="icon"><img src="/images/icon/icon-data-use.png" alt="이용상태 아이콘"></div>
                            <div class="title">이용상태</div>
                            <div class="con"><c:out value="${result.useStatusNm}"/> <span>(대기자 <c:out value="${result.awaiterCnt}"/>명)</span></div>
                        </div>
                        <div class="list">
                            <div class="icon"><img src="/images/icon/icon-data-return.png" alt="달력 아이콘"></div>
                            <div class="title">반납예정일</div>
                            <div class="con"><span><c:out value="${result.rtnExpctDd}"/></span></div>
                        </div>
                        <div class="list">
                            <div class="icon"><img src="/images/icon/icon-data-loan.png" alt="대출 아이콘"></div>
                            <div class="title">대출</div>
                            <div class="con">
                                <c:if test="${result.bookLentPsblYn eq 'Y' && result.rsrvPsblYn eq 'Y'}"><span class="poss">신청가능</span></c:if>
                                <c:if test="${result.bookLentPsblYn eq 'N' && result.rsrvPsblYn eq 'Y' }"><span class="poss">예약가능</span></c:if>
                                <c:if test="${result.bookLentPsblYn ne 'Y' && result.rsrvPsblYn ne 'Y'}"><span class="imposs">신청/예약불가</span></c:if>
                            </div>
                        </div>
                        <div class="list">
                            <div class="icon"><img src="/images/icon/icon-data-visit.png" alt="방문 아이콘"></div>
                            <div class="title">방문열람</div>
                            <div class="con">
                                <c:if test="${result.reqPsblYn eq 'Y' }"><span class="poss">신청가능</span></c:if>
                                <c:if test="${result.reqPsblYn ne 'Y' }"><span class="imposs">신청불가</span></c:if>
                            </div>
                        </div>
                    </div>
                    <div class="text-box">
                        <p>- 자료의 이용상태, 대출가능여부, 방문열람가능여부를 꼭 확인하신 후 이용해주시길 바랍니다.</p>
                        <p>- 다른 지방문화원 소장자료관 이용자들을 위해 꼭 필요한 자료만 예약한 후, 가능한 날짜에 예약 및 이용 부탁드립니다.</p>
                    </div>
                </div>
                
                <div class="con-2">
                    <div class="top">
                        <h3><span>목차</span>정보</h3>
                        <button type="button" class="down-btn">down-btn</button>
                    </div>
                    <div class="bottom h-down">
                        <p><span>1부</span> <c:out value="${result.bookIndex }"/></p>
                        <p><span>2부</span> 역사 속의 경주2 - 금오산을 바라본 조선문인의 시선</p>
                        <p><span>3부</span> 경주문화제 핫이슈 - 타향살이 100년 ‘청와대 미남석불’, 이제는 고향 경주의 품으로</p>
                        <p><span>4부</span> 경주문화제 핫이슈 - 타향살이 100년 ‘청와대 미남석불’, 이제는 고향 경주의 품으로</p>
                        <p><span>5부</span> 경주문화제 핫이슈 - 타향살이 100년 ‘청와대 미남석불’, 이제는 고향 경주의 품으로</p>
                        <p><span>6부</span> 경주문화제 핫이슈 - 타향살이 100년 ‘청와대 미남석불’, 이제는 고향 경주의 품으로</p>
                        <p><span>7부</span> 경주문화제 핫이슈 - 타향살이 100년 ‘청와대 미남석불’, 이제는 고향 경주의 품으로</p>
                        <p><span>8부</span> 경주문화제 핫이슈 - 타향살이 100년 ‘청와대 미남석불’, 이제는 고향 경주의 품으로</p>
                        <p><span>9부</span> 경주문화제 핫이슈 - 타향살이 100년 ‘청와대 미남석불’, 이제는 고향 경주의 품으로</p>
                    </div>
                </div>
                
                <div class="con-3">
                    <div class="bottom">
                        <!-- Swiper -->
                        <div class="swiper DetailSwiper1">
                            <div class="top">
                                <h3><span>함께 볼만한</span>자료</h3>
                            </div>
                            <div class="swiper-wrapper">
                               
                                <div class="swiper-slide">
                                    <div class="List">
                                        <div class="con-1">
                                            <div class="tit underline pink">국역 경주읍지</div>
                                        </div>
                                        <div class="con-2">
                                            <p class="typ"><span>자료유형</span><span>도서간행물 &gt; 연속간행물</span></p>
                                            <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>
                                    </div>
                                </div>
                                
                                <div class="swiper-slide">
                                    <div class="List">
                                        <div class="con-1">
                                            <div class="tit underline pink">국역 경주읍지</div>
                                        </div>
                                        <div class="con-2">
                                            <p class="typ"><span>자료유형</span><span>도서간행물 &gt; 연속간행물</span></p>
                                            <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>
                                    </div>
                                </div>
                                
                                <div class="swiper-slide">
                                    <div class="List">
                                        <div class="con-1">
                                            <div class="tit underline pink">국역 경주읍지</div>
                                        </div>
                                        <div class="con-2">
                                            <p class="typ"><span>자료유형</span><span>도서간행물 &gt; 연속간행물</span></p>
                                            <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>
                                    </div>
                                </div>
                                
                                <div class="swiper-slide">
                                    <div class="List">
                                        <div class="con-1">
                                            <div class="tit underline pink">국역 경주읍지</div>
                                        </div>
                                        <div class="con-2">
                                            <p class="typ"><span>자료유형</span><span>도서간행물 &gt; 연속간행물</span></p>
                                            <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>
                                    </div>
                                </div>
                                
                                <div class="swiper-slide">
                                    <div class="List">
                                        <div class="con-1">
                                            <div class="tit underline pink">국역 경주읍지</div>
                                        </div>
                                        <div class="con-2">
                                            <p class="typ"><span>자료유형</span><span>도서간행물 &gt; 연속간행물</span></p>
                                            <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>
                                    </div>
                                </div>
                                
                            </div>
                            <div class="swiper-button-next"></div>
                            <div class="swiper-button-prev"></div>
                            <div class="swiper-pagination"></div>
                        </div>
                        <!-- Swiper end -->
                    </div>
                </div>
            </div>
            
            <div class="row-bottom">
                <div class="con-4">
                    <div class="top">
                        <h3><span>이 자료와 유사한</span>자료</h3>
                        <p><strong>“ 경산문화원, 경주문화원, 고령문화 ”</strong> 에 있습니다</p>
                    </div>
                    <div class="bottom">
                        <!-- Swiper -->
                        <div class="swiper DetailSwiper2">
                            <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>
                                            </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>
                                            </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>
                                            </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>
                                            </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>
                                            </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>
                                            </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>
                                            </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>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-button-next"></div>
                            <div class="swiper-button-prev"></div>
                            <div class="swiper-pagination"></div>
                        </div>
                        <!-- Swiper end -->
                    </div>
                </div>
                
                <div class="btn-box">
                    <button type="button" class="btn btn-black">목록으로</button>
                </div>
                
            </div>
        </div>
    </div>
    
    <footer id="footer">
        <button type="button" id="btn-go-top" class="btn-go-top"><span><img src="/images/icon/icon-arr-top.png" alt="상단 화살표"></span><p>TOP</p></button>
        <div class="inner">
            <div class="row-top">
                <div class="footer-logo">
                    <h1><a href="#"><img src="/images/img/img-footer-logo.png" alt="푸터 로고"></a></h1>
                </div>
                <div class="family_site">
                    <p class="site_name">관련 사이트</p>
                    <ul class="site_depth">
                        <li><a href="/" target="_blank">01</a></li>
                        <li><a href="/" target="_blank">02</a></li>
                    </ul>
                </div>
            </div>
            <div class="row-bottom">
                <div class="left-side">
                    <ul class="fnb">
                        <li><a href="/">이용약관</a></li>
                        <li><a href="/">개인정보처리방침</a></li>
                        <li><a href="/">찾아오시는 길</a></li>
                    </ul>
                    <p class="copy">
                        서울시 마포대로49 성우빌딩 308호 <span><a href="tel:02-704-2322">TEL. 02.704-2322</a></span> <span>FAX. 02.704-2377</span> <br>
                        COPYRIGHT (C)2018 The Federation of Korea Culture Center. ALL RIGHT RESERVED.
                    </p>
                </div>
            </div>
        </div>
    </footer>

</div>

<div class="popup pop-sharing" id="div_pop-sharing" style="display:none;">
    <div class="pop-wrap">
        <div class="sharing-bg">
            <p>자료를 <strong>SNS</strong>에 공유해보세요.</p>
            <button class="btn-close-pop">닫기</button>
            <ul class="sns-list">
                <li class="kstory-icon"><img src="/images/icon/icon-sharing-kstory-big.svg" alt="카카오스토리 공유하기" class="sns-pop" /><p>카카오스토리</p></li>
                <li class="nblog-icon"><img src="/images/icon/icon-sharing-nblog-big.svg" alt="네이버블로그 공유하기" class="sns-pop" /><p>블로그</p></li>           
                <li class="fb-icon"><img src="/images/icon/icon-sharing-fb-big.svg" alt="페이스북 공유하기" class="sns-pop" /><p>페이스북</p></li>
                <li class="tw-icon"><img src="/images/icon/icon-sharing-tw-big.svg" alt="트위터 공유하기" class="sns-pop" /><p>트위터</p></li>
            </ul>
            <div class="link-copy">
                <input type="text" class="link-txt" id="p_link-copy" value="http://www.nculture.org"/>
                <button type="button" style="margin-top:1px" class="btn btn-white">URL복사</button>
            </div>
        </div>
        <div class="Qr">
            <div class="inner">
                <div id="qrcode" class="Qrimg"><img src="images/img/img-QR.jpg" alt="QR코드 이미지"></div>
                <div class="Qrtext"><p><strong>QR코드</strong>를 스캔해주세요.</p></div>
            </div>
        </div>
    </div>
</div>

<div class="pop-serge" style="display:none;">
    <div class="row Title">
        <h3>서지정보 내보내기<span>(Export)</span></h3>
    </div>
    <div class="inner">
        <div class="row Text">
            <div class="con-1">
                <p>서지정보 내보내기 안내</p>
                <div class="text-box">
                    <p>소장자료관은 콘텐츠 생산자 및 연구자들을 위해 서지정보 내보내기 기능을 제공하고 있습니다.</p>
                    <p><span>서지정보 내용</span><br>형식, 제목, 저자, 시리즈, 언어, URL, 태그</p>
                    <p><span>제공 포맷</span><br>RIS : Search Information System (*.ris)</p>
                    <p><span>RIS 지원 서지관리 프로그램</span><br>EndNote, Mendeley, Zotero) 외</p>
                </div>
            </div>
            <div class="con-2">
                <p>서지관리 프로그램 안내</p>
                <div class="text-box">
                    <p>서지관리 프로그램은 문헌 및 온라인 콘텐츠 등 자료를 관리하고 공유하는데 사용됩니다.</p>
                    <p>-  해당 프로그램은 소속기관 또는 개인 가입이 필요할 수 있으며, 소장자료관은 링크만 제공하고 직접 서비스를 제공하지 않습니다.</p>
                    <p><span>Zotero (www.zotero.com) / 한글 메뉴 지원 (o), 300MB 용량 무료 (초과 유료)</span></p>
                    <p><span>EndNote (www.endnote.com) / 한글 메뉴 지원 (x) , 2G 용량 무료 (초과유료)</span></p>
                    <p><span>Mendeley (www.mendeley.com) / 한글 메뉴 지원 (x), 2G 용량 무료 (초과유료)</span></p>
                </div>
            </div>
        </div>
        <div class="row btn-box">
            <button type="button" class="btn btn-color">내보내기</button>
            <button type="submit" class="btn btn-gray">닫기</button>
        </div>
        <button type="button" class="serge-close"></button>
    </div>
    <div class="Bg"></div>
</div>

<script>
/* 함께 볼만한자료 슬라이드 */
var swiper = new Swiper(".DetailSwiper1", {
    loop: true,
    slidesPerView: 4,
    spaceBetween: 30,
    centeredSlides: false,
    autoplay: {
        delay: 2500,
        disableOnInteraction: false,
    },
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    /*
    pagination: {
        el: ".swiper-pagination",
        clickable: true,
    },
    */
});
/* 유사한 자료 슬라이드 */
var swiper = new Swiper(".DetailSwiper2", {
    loop: true,
    slidesPerView: 5,
    spaceBetween: 30,
    centeredSlides: true,
    autoplay: {
        delay: 1112500,
        disableOnInteraction: false,
    },
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    /*
    pagination: {
        el: ".swiper-pagination",
        clickable: true,
    },
    */
});
</script>

</body>
</html>