23/10/11 메인 jsp 수정
This commit is contained in:
subsub
parent
084e2be35b
commit
a54b531cfe
@ -8,7 +8,8 @@
|
|||||||
|
|
||||||
<!-- script -->
|
<!-- script -->
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="/offeduadvc/visitEdu/usr/publish/css/swiper.min.css">
|
||||||
|
<script src="/offeduadvc/visitEdu/usr/publish/script/swiper.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
$(document).ready(function (){
|
$(document).ready(function (){
|
||||||
|
|
||||||
@ -174,368 +175,219 @@ function instrChk(){
|
|||||||
</c:forEach>
|
</c:forEach>
|
||||||
</c:if>
|
</c:if>
|
||||||
|
|
||||||
<!-- main content -->
|
<!-- main_content -->
|
||||||
<main class="main" id="main">
|
<div class="container main">
|
||||||
<div class="inner">
|
<!-- visual -->
|
||||||
<div class="cont1">
|
<div class="visual_slide swiper">
|
||||||
<c:forEach var="mainzoneList" items="${mainzoneList}" varStatus="status">
|
<button type="button" class="btn_prev_slide">이전 슬라이드</button>
|
||||||
<div class="swiper cont1-swiper">
|
<button type="button" class="btn_next_slide">다음 슬라이드</button>
|
||||||
<%-- <div class="swiper-slide visual1" style="background-image: url('<c:url value='/cmm/fms/getImage.do'/>?atchFileId=<c:out value="${result.mainzoneImageFile}"/>');"> --%>
|
<div class="swiper-wrapper">
|
||||||
<div class="swiper-slide visual1" style="background-image: url('<c:url value='/uss/ion/pwm/getImage.do'/>?atchFileId=<c:out value="${mainzoneList.mainzoneImageFile}"/>');">
|
<div class="swiper-slide">
|
||||||
<p class="txt1">대국민 저작권 교육 서비스</p>
|
<div class="inner">
|
||||||
<p class="txt2">찾아가는 저작권 교육!</p>
|
<div class="text_area">
|
||||||
<span>편리하고 안전한 저작권 이용환경 조성을 통해<br> 올바른 저작권 문화 구축에 앞장서겠습니다.</span>
|
<p class="sub_title">대국민 저작권 교육 서비스1</p>
|
||||||
<!-- <button type="button">교육과정 안내</button> -->
|
<p class="title">찾아가는 저작권 교육!</p>
|
||||||
<button type="button" onclick="location.href='<c:url value="/web/ve/aplct/tngrVisitEdu/eduAplct/eduAplctReg.do"/>'">교육신청 등록</button>
|
<p class="summary">편리하고 안전한 저작권 이용환경 조성을 통해 올바른 저작권 문화 구축에 앞장서겠습니다.</p>
|
||||||
|
<a href="#none">교육신청 등록</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</c:forEach>
|
<div class="swiper-slide">
|
||||||
</div>
|
<div class="inner">
|
||||||
<!--// content1 -->
|
<div class="text_area">
|
||||||
<!-- content2 -->
|
<p class="sub_title">대국민 저작권 교육 서비스2</p>
|
||||||
<div class="cont2">
|
<p class="title">찾아가는 저작권 교육!</p>
|
||||||
<div class="swiper cont2-swiper">
|
<p class="summary">편리하고 안전한 저작권 이용환경 조성을 통해 올바른 저작권 문화 구축에 앞장서겠습니다.</p>
|
||||||
<div class="swiper-wrapper">
|
<a href="#none">교육신청 등록</a>
|
||||||
<c:forEach var="popupzoneList" items="${popupzoneList}" varStatus="status">
|
|
||||||
<div class="swiper-slide popup${status.count}">
|
|
||||||
<img onerror="this.src='${pageContext.request.contextPath}/images/no_img.jpg'" style="width: 100%;" alt="<c:out value='${popupzoneList.imgAlt}' /> 알림창" src="<c:url value='/uss/ion/pwm/getImage.do'/>?atchFileId=<c:out value='${popupzoneList.popupzoneImageFile}'/>" />
|
|
||||||
|
|
||||||
<img class="mobile_banner" onerror="this.src='${pageContext.request.contextPath}/images/no_img.jpg'" alt="<c:out value='${popupzoneList.imgAlt}' /> 알림창" src='<c:url value='/uss/ion/pwm/getImage.do'/>?atchFileId=<c:out value="${popupzoneList.popupzoneImageFile}"/>' />
|
|
||||||
</div>
|
|
||||||
<%-- <div class="swiper-slide popup1">
|
|
||||||
<img src="/visitEdu/usr/publish/images/main/popup1.png" alt="저작권 교육하신 선생님 손에 커피드림 이벤트. 저작권 교육용 콘텐츠를 받아서 학생들에게 교육해주신 선생님들~ 교육 실적 입력하시고 스타벅스 커피 꼭 받아가세요~ 참여방법 1.저작권 교육용 콘텐츠를 수업에 사용 2.저작권 콘텐츠를 활용한 저작권 교육 실적을 제출하면 완료">
|
|
||||||
<img src="/visitEdu/usr/publish/images/main/m_popup1.png" alt="저작권 교육하신 선생님 손에 커피드림 이벤트. 저작권 교육용 콘텐츠를 받아서 학생들에게 교육해주신 선생님들~ 교육 실적 입력하시고 스타벅스 커피 꼭 받아가세요~ 참여방법 1.저작권 교육용 콘텐츠를 수업에 사용 2.저작권 콘텐츠를 활용한 저작권 교육 실적을 제출하면 완료" class="mobile_banner">
|
|
||||||
</div> --%>
|
|
||||||
</c:forEach>
|
|
||||||
</div>
|
|
||||||
<div class="slide_button">
|
|
||||||
<div class="control">
|
|
||||||
<div class="swiper-button-prev"></div>
|
|
||||||
<div class="swiper-pagination"></div>
|
|
||||||
<div class="swiper-button-next"></div>
|
|
||||||
</div>
|
</div>
|
||||||
<button type="button" class="slidePause" title="슬라이드 일시정지"></button>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<div class="inner">
|
||||||
|
<div class="text_area">
|
||||||
|
<p class="sub_title">대국민 저작권 교육 서비스3</p>
|
||||||
|
<p class="title">찾아가는 저작권 교육!</p>
|
||||||
|
<p class="summary">편리하고 안전한 저작권 이용환경 조성을 통해 올바른 저작권 문화 구축에 앞장서겠습니다.</p>
|
||||||
|
<a href="#none">교육신청 등록</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<div class="inner">
|
||||||
|
<div class="text_area">
|
||||||
|
<p class="sub_title">대국민 저작권 교육 서비스4</p>
|
||||||
|
<p class="title">찾아가는 저작권 교육!</p>
|
||||||
|
<p class="summary">편리하고 안전한 저작권 이용환경 조성을 통해 올바른 저작권 문화 구축에 앞장서겠습니다.</p>
|
||||||
|
<a href="#none">교육신청 등록</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<div class="inner">
|
||||||
|
<div class="text_area">
|
||||||
|
<p class="sub_title">대국민 저작권 교육 서비스5</p>
|
||||||
|
<p class="title">찾아가는 저작권 교육!</p>
|
||||||
|
<p class="summary">편리하고 안전한 저작권 이용환경 조성을 통해 올바른 저작권 문화 구축에 앞장서겠습니다.</p>
|
||||||
|
<a href="#none">교육신청 등록</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!--// content2 -->
|
<div class="slide_control">
|
||||||
|
<div class="inner">
|
||||||
<!-- content3 -->
|
<div class="swiper-pagination"></div>
|
||||||
<div class="cont3">
|
<button type="button" class="slide_pause" title="슬라이드 일시정지"></button>
|
||||||
<div class="cont3_tit">
|
|
||||||
<p>저작권 교육신청</p>
|
|
||||||
</div>
|
|
||||||
<div class="cont3_cont">
|
|
||||||
<c:if test="${userAuthority ne 'ROLE_USER_MANAGER'}">
|
|
||||||
<div class="cont3_cont_1">
|
|
||||||
<p><a href="${pageContext.request.contextPath}/web/ve/aplct/tngrVisitEdu/eduAplct/eduAplctReg.do" title="찾아가는 저작권 교육 청소년 바로가기"><span class="mo_text">청소년</span>찾아가는 저작권 교육<span>청소년</span></a></p>
|
|
||||||
</div>
|
|
||||||
<div class="cont3_cont_2">
|
|
||||||
<p><a href="${pageContext.request.contextPath}/web/ve/aplct/adultVisitEdu/eduAplct/eduAplctReg.do" title="찾아가는 저작권 교육 성인 바로가기"><span class="mo_text">성인</span>찾아가는 저작권 교육<span>성인</span></a></p>
|
|
||||||
</div>
|
|
||||||
<div class="cont3_cont_3">
|
|
||||||
<p><a href="${pageContext.request.contextPath}/web/ve/aplct/otsdCprtnPrcs/lctrAplct/lctrAplctReg.do" title="교육콘텐츠 신청 바로가기">교육콘텐츠 신청</a></p>
|
|
||||||
</div>
|
|
||||||
<div class="cont3_cont_4">
|
|
||||||
<p><a href="javascript:goCpyrgWrite();" title="저작권 체험교실 바로가기">저작권 체험교실</a></p>
|
|
||||||
</div>
|
|
||||||
</c:if>
|
|
||||||
<!-- 강사회원은 대국민 메뉴 이동 막기 -->
|
|
||||||
<c:if test="${userAuthority eq 'ROLE_USER_MANAGER'}">
|
|
||||||
<div class="cont3_cont_1">
|
|
||||||
<p><a href="javascript:instrChk();" title="찾아가는 저작권 교육 청소년 바로가기"><span class="mo_text">청소년</span>찾아가는 저작권 교육<span>청소년</span></a></p>
|
|
||||||
</div>
|
|
||||||
<div class="cont3_cont_2">
|
|
||||||
<p><a href="javascript:instrChk();" title="찾아가는 저작권 교육 성인 바로가기"><span class="mo_text">성인</span>찾아가는 저작권 교육<span>성인</span></a></p>
|
|
||||||
</div>
|
|
||||||
<div class="cont3_cont_3">
|
|
||||||
<p><a href="javascript:instrChk();" title="교육콘텐츠 신청 바로가기">교육콘텐츠 신청</a></p>
|
|
||||||
</div>
|
|
||||||
<div class="cont3_cont_4">
|
|
||||||
<p><a href="javascript:instrChk();" title="저작권 체험교실 바로가기">저작권 체험교실</a></p>
|
|
||||||
</div>
|
|
||||||
</c:if>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!--// content3 -->
|
</div>
|
||||||
|
|
||||||
|
<!-- main_banner -->
|
||||||
|
<ul class="main_banner_link inner">
|
||||||
|
<li class="banner_link_01">
|
||||||
|
<a href="#none">
|
||||||
|
<i></i>
|
||||||
|
<p>찾아가는 교육 <span>청소년</span></p>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="banner_link_02">
|
||||||
|
<a href="#none">
|
||||||
|
<i></i>
|
||||||
|
<p>찾아가는 교육 <span>성인</span></p>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="banner_link_03">
|
||||||
|
<a href="#none">
|
||||||
|
<i></i>
|
||||||
|
<p>체험교실</p>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="banner_link_04">
|
||||||
|
<a href="#none">
|
||||||
|
<i></i>
|
||||||
|
<p>실무역량강화교육</p>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="banner_link_05">
|
||||||
|
<a href="#none">
|
||||||
|
<i></i>
|
||||||
|
<p>기소유예교육</p>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
<!-- content4 -->
|
<div class="wrap inner">
|
||||||
<div class="cont4">
|
<!-- 공지사항 -->
|
||||||
<div class="main_cont_tit">
|
<div class="notice content_wrap">
|
||||||
<p>공지사항</p>
|
<div class="title">
|
||||||
|
<h3>공지사항</h3>
|
||||||
|
<a href="#none" class="btn_plus">더보기</a>
|
||||||
</div>
|
</div>
|
||||||
<ul class="list">
|
<div class="content">
|
||||||
|
<ul class="notice_list">
|
||||||
<c:forEach var="result" items="${bbsList}" varStatus="status">
|
<li>
|
||||||
<li onclick="javascript:fn_egov_inqire_notice('<c:out value="${result.bbsId}"/>', '<c:out value="${result.nttId}"/>');">
|
|
||||||
<a href="#none">
|
<a href="#none">
|
||||||
<p>
|
<p class="date"><i></i>2023-09-25</p>
|
||||||
<c:choose>
|
<p class="title"><span class="emphasis">공지</span>제 13기 청소년 전담 강사 양성</p>
|
||||||
<c:when test="${result.noticeAt eq 'Y'}">
|
|
||||||
<span class="noticeBox">공지</span><c:out value="${result.nttSj}" />
|
|
||||||
</c:when>
|
|
||||||
<c:otherwise>
|
|
||||||
<c:out value="${result.nttSj}" />
|
|
||||||
</c:otherwise>
|
|
||||||
</c:choose>
|
|
||||||
</p>
|
|
||||||
<span><c:out value="${result.frstRegisterPnttm}" /></span>
|
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</c:forEach>
|
<li>
|
||||||
</ul>
|
|
||||||
<button type="button" title="공지사항 더보기" class="main_more" onclick="location.href='${pageContext.request.contextPath}/web/cop/bbsWeb/selectBoardList.do?bbsId=BBSMSTR_000000000653'">더보기</button>
|
|
||||||
</div>
|
|
||||||
<!--// content4 -->
|
|
||||||
|
|
||||||
<!-- content5 -->
|
|
||||||
<div class="cont4">
|
|
||||||
<!-- <div class="main_cont_tit">
|
|
||||||
<p>교육자료실</p>
|
|
||||||
<button type="button">더보기</button>
|
|
||||||
</div>
|
|
||||||
<ul class="list">
|
|
||||||
<li>
|
|
||||||
<a href="#none" class="imgBox">
|
|
||||||
<img src="/visitEdu/usr/publish/images/main/cont5_img1.jpg" alt="">
|
|
||||||
</a>
|
|
||||||
<a href="#none" class="textBox">
|
|
||||||
<p>‘마시멜로 이야기’ 와 저작권 ‘마시멜로 이야기’ 와 저작권</p>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#none" class="imgBox">
|
|
||||||
<img src="/visitEdu/usr/publish/images/main/cont5_img2.jpg" alt="">
|
|
||||||
</a>
|
|
||||||
<a href="#none" class="textBox">
|
|
||||||
<p>노.코.트(북유럽으로 떠나는 저작권 여행)</p>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#none" class="imgBox">
|
|
||||||
<img src="/visitEdu/usr/publish/images/main/cont5_img3.jpg" alt="">
|
|
||||||
</a>
|
|
||||||
<a href="#none" class="textBox">
|
|
||||||
<p>저작권 어떻게 이용해야 하나요?</p>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul> -->
|
|
||||||
<div class="main_cont_tit">
|
|
||||||
<p>교육자료실</p>
|
|
||||||
</div>
|
|
||||||
<ul class="list">
|
|
||||||
|
|
||||||
<c:forEach var="result" items="${bbsList_2}" varStatus="status">
|
|
||||||
<li onclick="javascript:fn_egov_inqire_notice('<c:out value="${result.bbsId}"/>', '<c:out value="${result.nttId}"/>');">
|
|
||||||
<a href="#none">
|
<a href="#none">
|
||||||
<p>
|
<p class="date"><i></i>2023-09-25</p>
|
||||||
<c:choose>
|
<p class="title">제 13기 청소년 전담 강사 양성</p>
|
||||||
<c:when test="${result.noticeAt eq 'Y'}">
|
|
||||||
<span class="noticeBox">공지</span><c:out value="${result.nttSj}" />
|
|
||||||
</c:when>
|
|
||||||
<c:otherwise>
|
|
||||||
<c:out value="${result.nttSj}" />
|
|
||||||
</c:otherwise>
|
|
||||||
</c:choose>
|
|
||||||
</p>
|
|
||||||
<span><c:out value="${result.frstRegisterPnttm}" /></span>
|
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</c:forEach>
|
<li>
|
||||||
</ul>
|
<a href="#none">
|
||||||
<button type="button" title="교육자료실 더보기" class="main_more" onclick="location.href='${pageContext.request.contextPath}/web/cop/bbsWeb/selectBoardList.do?bbsId=BBSMSTR_000000000681'">더보기</button>
|
<p class="date"><i></i>2023-09-25</p>
|
||||||
</div>
|
<p class="title">제 13기 청소년 전담 강사 양성</p>
|
||||||
<!--// content5 -->
|
</a>
|
||||||
|
</li>
|
||||||
</div>
|
<li>
|
||||||
</main>
|
<a href="#none">
|
||||||
<!-- 메인 콘텐츠 시작 -->
|
<p class="date"><i></i>2023-09-25</p>
|
||||||
<%-- <main class="main" id="main">
|
<p class="title">제 13기 청소년 전담 강사 양성</p>
|
||||||
<!-- 메인 비주얼 -->
|
</a>
|
||||||
<div class="main_visual">
|
</li>
|
||||||
<div class="visual_wrap swiper-container">
|
<li>
|
||||||
<ul class="visual_list swiper-wrapper">
|
<a href="#none">
|
||||||
<c:forEach var="result" varStatus="status" items="${mainzoneList}">
|
<p class="date"><i></i>2023-09-25</p>
|
||||||
<li class="visual_img img01 swiper-slide" style="background-image:url('<c:url value='/uss/ion/pwm/getImage.do'/>?atchFileId=<c:out value="${result.mainzoneImageFile}"/>'); background-repeat: no-repeat; background-position: center;"></li>
|
<p class="title">제 13기 청소년 전담 강사 양성</p>
|
||||||
</c:forEach>
|
</a>
|
||||||
<!-- <li class="visual_img img01 swiper-slide"></li> -->
|
</li>
|
||||||
<!-- <li class="visual_img img02 swiper-slide"></li>
|
<li>
|
||||||
<li class="visual_img img03 swiper-slide"></li> -->
|
<a href="#none">
|
||||||
</ul>
|
<p class="date"><i></i>2023-09-25</p>
|
||||||
<!-- <div class="visual_nav"></div> -->
|
<p class="title">제 13기 청소년 전담 강사 양성</p>
|
||||||
<div class="visual_util">
|
</a>
|
||||||
<c:if test="${fn:length(mainzoneList) > 1}" >
|
</li>
|
||||||
<button class="visual_prev" title="비주얼 이미지 이전"></button>
|
</ul>
|
||||||
<button class="visual_next" title="비주얼 이미지 다음"></button>
|
|
||||||
</c:if>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="inner">
|
|
||||||
<div class="text_area">
|
<!-- 교육자료실 -->
|
||||||
<p>분쟁을 신속하고 공정하게 해결해주는</p>
|
<div class="data_notice content_wrap">
|
||||||
<span>저작권 시스템</span>
|
<div class="title">
|
||||||
|
<h3>자료실</h3>
|
||||||
|
<a href="#none" class="btn_plus">더보기</a>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="search_area">
|
<div class="content">
|
||||||
<label for="searchInput">검색어 입력</label><input type="text" id="searchInput"><button type="button" class="btn_search" title="검색"></button>
|
<ul class="notice_list">
|
||||||
<div class="tag_area">
|
<li>
|
||||||
<a href="/">#저작권</a>
|
<a href="#none">
|
||||||
<a href="/">#폰트사용범위</a>
|
<p class="title"><i></i>제 13기 청소년 전담 강사 양성</p>
|
||||||
<a href="/">#저작권침해</a>
|
<p class="date">2023-09-25</p>
|
||||||
<a href="/">#만료저작물</a>
|
|
||||||
<a href="/">#음원저작권</a>
|
|
||||||
</div>
|
|
||||||
</div> -->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- //메인 비주얼 -->
|
|
||||||
|
|
||||||
<!-- 바로가기 -->
|
|
||||||
<div class="baro_cont">
|
|
||||||
<div class="inner">
|
|
||||||
<a href="/web/kccadr/adjst/adjstReqRegistInformation.do"><i></i>
|
|
||||||
<p>교육신청</p>
|
|
||||||
</a>
|
|
||||||
<a href="/web/kccadr/accdnt/ai/adjstIncidentList.do?searchStatus=B"><i></i>
|
|
||||||
<p>서류제출</p>
|
|
||||||
</a>
|
|
||||||
<a href="/web/kccadr/accdnt/ai/adjstIncidentList.do"><i></i>
|
|
||||||
<p>신청현황</p>
|
|
||||||
</a>
|
|
||||||
<a href="/web/kccadr/accdnt/ass/AdjustSchStatusList.do"><i></i>
|
|
||||||
<p>조정일정 현황</p>
|
|
||||||
</a>
|
|
||||||
<a href="/web/cop/bbsWeb/selectBoardList.do?bbsId=BBSMSTR_000000000654"><i></i>
|
|
||||||
<p>문의게시판</p>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- //바로가기 -->
|
|
||||||
|
|
||||||
<div class="btm_cont">
|
|
||||||
<div class="inner">
|
|
||||||
<!-- 교육신청 안내 -->
|
|
||||||
<div class="area_info area_cont">
|
|
||||||
<div class="area_top">
|
|
||||||
<p class="tit">교육신청 안내</p>
|
|
||||||
</div>
|
|
||||||
<div class="cont">
|
|
||||||
<div class="bnn_cont">
|
|
||||||
<a href="/web/kccadr/adjst/adjstReq1Regist.do">
|
|
||||||
<i></i>
|
|
||||||
<span> 신청</span>
|
|
||||||
<p>온라인상으로 구비서류 제출 및 수수료 결제</p>
|
|
||||||
</a>
|
</a>
|
||||||
<a href="/web/content.do?proFn=9150000">
|
</li>
|
||||||
<i></i>
|
<li>
|
||||||
<span>오프라인 신청</span>
|
<a href="#none">
|
||||||
<p>한국저작권위원회로 우편 송달 또는 방문</p>
|
<p class="title"><i></i>제 13기 청소년 전담 강사 양성</p>
|
||||||
|
<p class="date">2023-09-25</p>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</li>
|
||||||
<div class="area_btm">
|
<li>
|
||||||
<div class="tit">
|
<a href="#none">
|
||||||
<i></i>
|
<p class="title"><i></i>제 13기 청소년 전담 강사 양성</p>
|
||||||
<p>상담전화</p>
|
<p class="date">2023-09-25</p>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#none">
|
||||||
|
<p class="title"><i></i>제 13기 청소년 전담 강사 양성</p>
|
||||||
|
<p class="date">2023-09-25</p>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 알림판 -->
|
||||||
|
<div class="notify content_wrap">
|
||||||
|
<div class="title">
|
||||||
|
<h3>알림판</h3>
|
||||||
|
<div class="notify_control">
|
||||||
|
<div class="swiper-button-prev"></div>
|
||||||
|
<p class="slide_number"><span class="cur_number">1</span>/ <span class="all_number">5</span></p>
|
||||||
|
<div class="swiper-button-next"></div>
|
||||||
|
<button type="button" class="slide_pause" title="슬라이드 일시정지"></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="notify_slide">
|
||||||
|
<div class="swiper-wrapper">
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<img src="/offeduadvc/visitEdu/usr/publish/images/main/main_notify_img_01.jpg" alt="">
|
||||||
</div>
|
</div>
|
||||||
<p class="info">
|
<div class="swiper-slide">
|
||||||
<span>02-2669-0042</span>
|
<img src="/offeduadvc/visitEdu/usr/publish/images/main/main_notify_img_02.jpg" alt="">
|
||||||
월~금(평일) 09:00~18:00
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- //교육신청 안내 -->
|
|
||||||
|
|
||||||
<!-- 게시판 -->
|
|
||||||
<div class="area_cont area_list">
|
|
||||||
<div class="area_top">
|
|
||||||
<p class="tit">조정사례</p>
|
|
||||||
<div class="cont_util">
|
|
||||||
<button class="btn_plus" onclick="location.href='/web/cop/bbsWeb/selectBoardList.do?bbsId=BBSMSTR_000000000651' " title="공지사항 페이지 이동"><i></i></button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="cont list_cont">
|
|
||||||
<ul class="list">
|
|
||||||
<c:forEach var="result" items="${bbsList}" varStatus="status">
|
|
||||||
<li onclick="javascript:fn_egov_inqire_notice('<c:out value="${result.bbsId}"/>', '<c:out value="${result.nttId}"/>');">
|
|
||||||
<a href="#">
|
|
||||||
<p class="list_top">
|
|
||||||
<span class="list_tit"><c:if test="${status.count ne '1'}">·</c:if><c:out value="${result.nttSj}" /></span>
|
|
||||||
<span class="list_date"><c:out value="${result.frstRegisterPnttm}" /></span>
|
|
||||||
</p>
|
|
||||||
<c:if test="${status.count eq '1'}">
|
|
||||||
<p class="list_info"><c:out value="${result.nttCn}" escapeXml="false;"/></p>
|
|
||||||
</c:if>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</c:forEach>
|
|
||||||
<!-- <li>
|
|
||||||
<a href="#">
|
|
||||||
<p class="list_top">
|
|
||||||
<span class="list_tit">조정 사례 공개 안내</span>
|
|
||||||
<span class="list_date">2017-05-08</span>
|
|
||||||
</p>
|
|
||||||
<p class="list_info">안녕하세요 조정 사례는 실제 발생한 조정 사례를
|
|
||||||
기준으로 작성되고 있습니다.다만, 조정제도는...</p>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#">
|
|
||||||
<p class="list_top">
|
|
||||||
<span class="list_tit">· 조정 사례 공개 안내</span>
|
|
||||||
<span class="list_date">2017-05-08</span>
|
|
||||||
</p>
|
|
||||||
</a>
|
|
||||||
</li> -->
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- //게시판 -->
|
|
||||||
|
|
||||||
|
|
||||||
<!-- 알림창 -->
|
|
||||||
<div class="area_pz area_cont">
|
|
||||||
<div class="area_top">
|
|
||||||
<p class="tit">알림판</p>
|
|
||||||
<div class="cont_util">
|
|
||||||
<button type="button" class="btn_prev" title="이전알림창 이미지 이동"></button>
|
|
||||||
<button type="button" class="btn_next" title="다음알림창 이미지 이동"></button>
|
|
||||||
<button type="button" class="btn_ctl btn_pause" onclick="pz_ctl(this);" title="알림창 일시정지"></button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="cont">
|
|
||||||
<div class=" <c:if test="${fn:length(popupzoneList) > 1}">swiper-container</c:if> pz_wrap">
|
|
||||||
<ul class="pz_list swiper-wrapper">
|
|
||||||
<c:forEach var="result" items="${popupzoneList}" varStatus="status"><!-- 알림창 -->
|
|
||||||
<li class="swiper-slide">
|
|
||||||
<c:set var="popzATitle"></c:set>
|
|
||||||
<c:if test="${result.istarget == 'N'}">
|
|
||||||
<c:set var="popzATitle">새창열림</c:set>
|
|
||||||
</c:if>
|
|
||||||
<c:if test="${result.istarget == 'N'}">
|
|
||||||
<a href="javascript:popzoneOpen('<c:out value='${result.mlink}' />','<c:out value='${result.istarget}' />');" title="새창열림" >
|
|
||||||
</c:if>
|
|
||||||
<c:if test="${result.istarget != 'N'}">
|
|
||||||
<a href="javascript:popzoneOpen('<c:out value='${result.mlink}' />','<c:out value='${result.istarget}' />');">
|
|
||||||
</c:if>
|
|
||||||
<img style="cursor:pointer"
|
|
||||||
onerror="this.src='/images/no_img.jpg'" alt="<c:out value='${result.imgAlt}' /> 알림창"
|
|
||||||
src='<c:url value='/uss/ion/pwm/getImage.do'/>?atchFileId=<c:out value="${result.popupzoneImageFile}"/>' />
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</c:forEach>
|
|
||||||
<!-- <li class="pz_img img01 swiper-slide"></li>
|
|
||||||
<li class="pz_img img02 swiper-slide"></li>
|
|
||||||
<li class="pz_img img03 swiper-slide"></li> -->
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- //알림창 -->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main> --%>
|
</div>
|
||||||
<!-- // 메인 콘텐츠 종료 -->
|
<!-- //main_content -->
|
||||||
|
|
||||||
<form name="frm" action="<c:url value='/web/cop/bbsWeb/selectBoardList.do'/>" method="post">
|
<form name="frm" action="<c:url value='/web/cop/bbsWeb/selectBoardList.do'/>" method="post">
|
||||||
<input type="hidden" name="bbsId" value="" />
|
<input type="hidden" name="bbsId" value="" />
|
||||||
<input type="hidden" name="nttId" value="" />
|
<input type="hidden" name="nttId" value="" />
|
||||||
|
|||||||
543
src/main/webapp/WEB-INF/jsp/web/main/mainPage_231011.jsp
Normal file
543
src/main/webapp/WEB-INF/jsp/web/main/mainPage_231011.jsp
Normal file
@ -0,0 +1,543 @@
|
|||||||
|
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
||||||
|
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
|
||||||
|
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
|
||||||
|
<html lang="ko">
|
||||||
|
<head>
|
||||||
|
<!-- css -->
|
||||||
|
|
||||||
|
|
||||||
|
<!-- script -->
|
||||||
|
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
$(document).ready(function (){
|
||||||
|
|
||||||
|
<c:if test="${message != null}">
|
||||||
|
alert("<c:out value='${message}' />");
|
||||||
|
</c:if>
|
||||||
|
|
||||||
|
//레이어 팝업 띄우기
|
||||||
|
<c:forEach var="popupListData" items="${popupList}" varStatus="status" end="10">
|
||||||
|
if(fnGetCookie("layer_<c:out value='${popupListData.popupId}' />") == null){
|
||||||
|
$("#layer_pop_<c:out value='${popupListData.popupId}' />").fadeIn();
|
||||||
|
};
|
||||||
|
</c:forEach>
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
/* ********************************************************
|
||||||
|
* 팝업창 오픈 쿠키 정보 OPEN
|
||||||
|
******************************************************** */
|
||||||
|
function fnGetCookie(name) {
|
||||||
|
var prefix = name + "=";
|
||||||
|
|
||||||
|
var cookieStartIndex = document.cookie.indexOf(prefix);
|
||||||
|
if (cookieStartIndex == -1) return null;
|
||||||
|
var cookieEndIndex = document.cookie.indexOf(";", cookieStartIndex + prefix.length);
|
||||||
|
if (cookieEndIndex == -1) cookieEndIndex = document.cookie.length;
|
||||||
|
|
||||||
|
|
||||||
|
return unescape(document.cookie.substring(cookieStartIndex + prefix.length, cookieEndIndex));
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ********************************************************
|
||||||
|
* 쿠키설정
|
||||||
|
******************************************************** */
|
||||||
|
function fnSetCookiePopup( name, value, expiredays ) {
|
||||||
|
var todayDate = new Date();
|
||||||
|
todayDate.setDate( todayDate.getDate() + expiredays );
|
||||||
|
document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"
|
||||||
|
}
|
||||||
|
|
||||||
|
//팝업 다시보지않기
|
||||||
|
function fnPopupCheck(popupId , typeFlag) {
|
||||||
|
fnSetCookiePopup( typeFlag+"_"+popupId , "done" , 1);
|
||||||
|
fn_layerClose(popupId);
|
||||||
|
}
|
||||||
|
|
||||||
|
//팝업 닫기
|
||||||
|
function fn_layerClose(popupId){
|
||||||
|
$("#layer_pop_"+popupId).fadeOut();
|
||||||
|
}
|
||||||
|
|
||||||
|
function popzoneOpen(url,target){
|
||||||
|
var vTarget;
|
||||||
|
if(target != "N"){
|
||||||
|
vTarget = "_self";
|
||||||
|
}else{
|
||||||
|
vTarget = "_blank";
|
||||||
|
}
|
||||||
|
window.open(url,vTarget);
|
||||||
|
}
|
||||||
|
|
||||||
|
function fn_egov_inqire_notice(bbsId, nttId) {
|
||||||
|
document.frm.nttId.value = nttId;
|
||||||
|
document.frm.bbsId.value = bbsId;
|
||||||
|
document.frm.method = "post";
|
||||||
|
document.frm.action = "<c:url value='/web/cop/bbsWeb/selectBoardDetail.do'/>?pubDetail=Y";
|
||||||
|
document.frm.submit();
|
||||||
|
}
|
||||||
|
//저작권체험교실 등록화면 이동 시 운영신청 기간인지 체크
|
||||||
|
function goCpyrgWrite(){
|
||||||
|
if(!checkAplctPsbl()) return;
|
||||||
|
|
||||||
|
location.href="${pageContext.request.contextPath}/web/ve/aplct/cpyrgExprnClsrm/exprnClsrmInfo/exprnClsrmAplctGuide.do";
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// 신청하는 차시가 유효한 신청기간인지, 강의가능시간인지 체크하는 로직
|
||||||
|
function checkAplctPsbl() {
|
||||||
|
|
||||||
|
var flag = true;
|
||||||
|
|
||||||
|
$.ajax({
|
||||||
|
type:"POST",
|
||||||
|
url:"${pageContext.request.contextPath}/web/ve/aplct/cpyrgExprnClsrm/exprnClsrmInfo/eduAplctChkAjax.do",
|
||||||
|
data: "",
|
||||||
|
dataType:'json',
|
||||||
|
async: false,
|
||||||
|
success:function(returnData){
|
||||||
|
if(returnData.result == "fail"){
|
||||||
|
alert("운영신청기간이 아닙니다.");
|
||||||
|
flag = false;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
error:function(request , status, error){
|
||||||
|
alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if(!flag){
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return true;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
//강사회원 대국민 메뉴 막기
|
||||||
|
function instrChk(){
|
||||||
|
alert("대국민 회원만 이용가능합니다.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<c:if test="${fn:length(popupList) > 0}" >
|
||||||
|
<style>
|
||||||
|
.pop-layer{left: 50%; top: 50%; transform: translate(-50%,-50%); box-shadow: 0 0 5px rgba(0,0,0,0.3);}
|
||||||
|
.pop-layer .pop-container {padding: 0px 0px;}
|
||||||
|
.pop-layer p.ctxt {color: #666;line-height: 25px;}
|
||||||
|
.pop-layer .btn-r {display: flex; width: 100%; padding-top: 10px;border-top: 1px solid #DDD;text-align: right; justify-content: space-between; padding: 5px 10px; box-sizing: border-box; align-items: center;}
|
||||||
|
.pop-layer {display: none;position: absolute;background-color: #fff;z-index: 999;}
|
||||||
|
#tdCheck+label{overflow: hidden;border: 0;width: 1px;height: 1px;clip: rect(1px, 1px, 1px, 1px);clip-path: inset(50%);}
|
||||||
|
.btn-layerClose{width: 16px; height: 16px; background-image: url(${pageContext.request.contextPath}/kccadrPb/usr/image/common/btn_close.png); background-repeat: no-repeat; background-size: 100%;}
|
||||||
|
</style>
|
||||||
|
<c:forEach var="popupListData" items="${popupList}" varStatus="status" end="4">
|
||||||
|
<style>
|
||||||
|
#layer_pop_<c:out value='${popupListData.popupId}' />{
|
||||||
|
/* top: ${popupListData.popupVrticlLc}px;
|
||||||
|
left: ${popupListData.popupWidthLc}px;
|
||||||
|
width: ${popupListData.popupWidthSize}px; */
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div id="layer_pop_<c:out value='${popupListData.popupId}' />" class="pop-layer">
|
||||||
|
<div class="pop-container">
|
||||||
|
<div class="pop-conts">
|
||||||
|
<c:choose>
|
||||||
|
<c:when test="${not empty popupListData.fileUrl}">
|
||||||
|
<a href="<c:out value='${popupListData.fileUrl}' />" target="_blank">
|
||||||
|
<c:out value='${popupListData.nttCn}' />
|
||||||
|
</a>
|
||||||
|
</c:when>
|
||||||
|
<c:otherwise>
|
||||||
|
<a href="#">
|
||||||
|
<c:out value='${popupListData.nttCn}' />
|
||||||
|
</a>
|
||||||
|
</c:otherwise>
|
||||||
|
</c:choose>
|
||||||
|
<div class="btn-r">
|
||||||
|
<div class="today_close">
|
||||||
|
<c:if test="${popupListData.stopvewSetupAt eq 'Y' }">
|
||||||
|
하루동안 창을 열지 않음
|
||||||
|
<input type="checkbox" name="chkPopup" tabindex="1" onClick="fnPopupCheck('<c:out value='${popupListData.popupId}' />' , 'layer')" onkeypress="fnPopupCheck('<c:out value='${popupListData.popupId}' />' , 'layer')" style="display:inline">
|
||||||
|
</c:if>
|
||||||
|
</div>
|
||||||
|
<a href="#" tabindex="1" onclick="fn_layerClose('<c:out value='${popupListData.popupId}' />'); return false;" class="btn-layerClose" title="팝업 닫기"></a>
|
||||||
|
</div>
|
||||||
|
<!--// content-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</c:forEach>
|
||||||
|
</c:if>
|
||||||
|
|
||||||
|
<!-- main content -->
|
||||||
|
<main class="main" id="main">
|
||||||
|
<div class="inner">
|
||||||
|
<div class="cont1">
|
||||||
|
<c:forEach var="mainzoneList" items="${mainzoneList}" varStatus="status">
|
||||||
|
<div class="swiper cont1-swiper">
|
||||||
|
<%-- <div class="swiper-slide visual1" style="background-image: url('<c:url value='/cmm/fms/getImage.do'/>?atchFileId=<c:out value="${result.mainzoneImageFile}"/>');"> --%>
|
||||||
|
<div class="swiper-slide visual1" style="background-image: url('<c:url value='/uss/ion/pwm/getImage.do'/>?atchFileId=<c:out value="${mainzoneList.mainzoneImageFile}"/>');">
|
||||||
|
<p class="txt1">대국민 저작권 교육 서비스</p>
|
||||||
|
<p class="txt2">찾아가는 저작권 교육!</p>
|
||||||
|
<span>편리하고 안전한 저작권 이용환경 조성을 통해<br> 올바른 저작권 문화 구축에 앞장서겠습니다.</span>
|
||||||
|
<!-- <button type="button">교육과정 안내</button> -->
|
||||||
|
<button type="button" onclick="location.href='<c:url value="/web/ve/aplct/tngrVisitEdu/eduAplct/eduAplctReg.do"/>'">교육신청 등록</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</c:forEach>
|
||||||
|
</div>
|
||||||
|
<!--// content1 -->
|
||||||
|
<!-- content2 -->
|
||||||
|
<div class="cont2">
|
||||||
|
<div class="swiper cont2-swiper">
|
||||||
|
<div class="swiper-wrapper">
|
||||||
|
<c:forEach var="popupzoneList" items="${popupzoneList}" varStatus="status">
|
||||||
|
<div class="swiper-slide popup${status.count}">
|
||||||
|
<img onerror="this.src='${pageContext.request.contextPath}/images/no_img.jpg'" style="width: 100%;" alt="<c:out value='${popupzoneList.imgAlt}' /> 알림창" src="<c:url value='/uss/ion/pwm/getImage.do'/>?atchFileId=<c:out value='${popupzoneList.popupzoneImageFile}'/>" />
|
||||||
|
|
||||||
|
<img class="mobile_banner" onerror="this.src='${pageContext.request.contextPath}/images/no_img.jpg'" alt="<c:out value='${popupzoneList.imgAlt}' /> 알림창" src='<c:url value='/uss/ion/pwm/getImage.do'/>?atchFileId=<c:out value="${popupzoneList.popupzoneImageFile}"/>' />
|
||||||
|
</div>
|
||||||
|
<%-- <div class="swiper-slide popup1">
|
||||||
|
<img src="/visitEdu/usr/publish/images/main/popup1.png" alt="저작권 교육하신 선생님 손에 커피드림 이벤트. 저작권 교육용 콘텐츠를 받아서 학생들에게 교육해주신 선생님들~ 교육 실적 입력하시고 스타벅스 커피 꼭 받아가세요~ 참여방법 1.저작권 교육용 콘텐츠를 수업에 사용 2.저작권 콘텐츠를 활용한 저작권 교육 실적을 제출하면 완료">
|
||||||
|
<img src="/visitEdu/usr/publish/images/main/m_popup1.png" alt="저작권 교육하신 선생님 손에 커피드림 이벤트. 저작권 교육용 콘텐츠를 받아서 학생들에게 교육해주신 선생님들~ 교육 실적 입력하시고 스타벅스 커피 꼭 받아가세요~ 참여방법 1.저작권 교육용 콘텐츠를 수업에 사용 2.저작권 콘텐츠를 활용한 저작권 교육 실적을 제출하면 완료" class="mobile_banner">
|
||||||
|
</div> --%>
|
||||||
|
</c:forEach>
|
||||||
|
</div>
|
||||||
|
<div class="slide_button">
|
||||||
|
<div class="control">
|
||||||
|
<div class="swiper-button-prev"></div>
|
||||||
|
<div class="swiper-pagination"></div>
|
||||||
|
<div class="swiper-button-next"></div>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="slidePause" title="슬라이드 일시정지"></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--// content2 -->
|
||||||
|
|
||||||
|
<!-- content3 -->
|
||||||
|
<div class="cont3">
|
||||||
|
<div class="cont3_tit">
|
||||||
|
<p>저작권 교육신청</p>
|
||||||
|
</div>
|
||||||
|
<div class="cont3_cont">
|
||||||
|
<c:if test="${userAuthority ne 'ROLE_USER_MANAGER'}">
|
||||||
|
<div class="cont3_cont_1">
|
||||||
|
<p><a href="${pageContext.request.contextPath}/web/ve/aplct/tngrVisitEdu/eduAplct/eduAplctReg.do" title="찾아가는 저작권 교육 청소년 바로가기"><span class="mo_text">청소년</span>찾아가는 저작권 교육<span>청소년</span></a></p>
|
||||||
|
</div>
|
||||||
|
<div class="cont3_cont_2">
|
||||||
|
<p><a href="${pageContext.request.contextPath}/web/ve/aplct/adultVisitEdu/eduAplct/eduAplctReg.do" title="찾아가는 저작권 교육 성인 바로가기"><span class="mo_text">성인</span>찾아가는 저작권 교육<span>성인</span></a></p>
|
||||||
|
</div>
|
||||||
|
<div class="cont3_cont_3">
|
||||||
|
<p><a href="${pageContext.request.contextPath}/web/ve/aplct/otsdCprtnPrcs/lctrAplct/lctrAplctReg.do" title="교육콘텐츠 신청 바로가기">교육콘텐츠 신청</a></p>
|
||||||
|
</div>
|
||||||
|
<div class="cont3_cont_4">
|
||||||
|
<p><a href="javascript:goCpyrgWrite();" title="저작권 체험교실 바로가기">저작권 체험교실</a></p>
|
||||||
|
</div>
|
||||||
|
</c:if>
|
||||||
|
<!-- 강사회원은 대국민 메뉴 이동 막기 -->
|
||||||
|
<c:if test="${userAuthority eq 'ROLE_USER_MANAGER'}">
|
||||||
|
<div class="cont3_cont_1">
|
||||||
|
<p><a href="javascript:instrChk();" title="찾아가는 저작권 교육 청소년 바로가기"><span class="mo_text">청소년</span>찾아가는 저작권 교육<span>청소년</span></a></p>
|
||||||
|
</div>
|
||||||
|
<div class="cont3_cont_2">
|
||||||
|
<p><a href="javascript:instrChk();" title="찾아가는 저작권 교육 성인 바로가기"><span class="mo_text">성인</span>찾아가는 저작권 교육<span>성인</span></a></p>
|
||||||
|
</div>
|
||||||
|
<div class="cont3_cont_3">
|
||||||
|
<p><a href="javascript:instrChk();" title="교육콘텐츠 신청 바로가기">교육콘텐츠 신청</a></p>
|
||||||
|
</div>
|
||||||
|
<div class="cont3_cont_4">
|
||||||
|
<p><a href="javascript:instrChk();" title="저작권 체험교실 바로가기">저작권 체험교실</a></p>
|
||||||
|
</div>
|
||||||
|
</c:if>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--// content3 -->
|
||||||
|
|
||||||
|
<!-- content4 -->
|
||||||
|
<div class="cont4">
|
||||||
|
<div class="main_cont_tit">
|
||||||
|
<p>공지사항</p>
|
||||||
|
</div>
|
||||||
|
<ul class="list">
|
||||||
|
|
||||||
|
<c:forEach var="result" items="${bbsList}" varStatus="status">
|
||||||
|
<li onclick="javascript:fn_egov_inqire_notice('<c:out value="${result.bbsId}"/>', '<c:out value="${result.nttId}"/>');">
|
||||||
|
<a href="#none">
|
||||||
|
<p>
|
||||||
|
<c:choose>
|
||||||
|
<c:when test="${result.noticeAt eq 'Y'}">
|
||||||
|
<span class="noticeBox">공지</span><c:out value="${result.nttSj}" />
|
||||||
|
</c:when>
|
||||||
|
<c:otherwise>
|
||||||
|
<c:out value="${result.nttSj}" />
|
||||||
|
</c:otherwise>
|
||||||
|
</c:choose>
|
||||||
|
</p>
|
||||||
|
<span><c:out value="${result.frstRegisterPnttm}" /></span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</c:forEach>
|
||||||
|
</ul>
|
||||||
|
<button type="button" title="공지사항 더보기" class="main_more" onclick="location.href='${pageContext.request.contextPath}/web/cop/bbsWeb/selectBoardList.do?bbsId=BBSMSTR_000000000653'">더보기</button>
|
||||||
|
</div>
|
||||||
|
<!--// content4 -->
|
||||||
|
|
||||||
|
<!-- content5 -->
|
||||||
|
<div class="cont4">
|
||||||
|
<!-- <div class="main_cont_tit">
|
||||||
|
<p>교육자료실</p>
|
||||||
|
<button type="button">더보기</button>
|
||||||
|
</div>
|
||||||
|
<ul class="list">
|
||||||
|
<li>
|
||||||
|
<a href="#none" class="imgBox">
|
||||||
|
<img src="/visitEdu/usr/publish/images/main/cont5_img1.jpg" alt="">
|
||||||
|
</a>
|
||||||
|
<a href="#none" class="textBox">
|
||||||
|
<p>‘마시멜로 이야기’ 와 저작권 ‘마시멜로 이야기’ 와 저작권</p>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#none" class="imgBox">
|
||||||
|
<img src="/visitEdu/usr/publish/images/main/cont5_img2.jpg" alt="">
|
||||||
|
</a>
|
||||||
|
<a href="#none" class="textBox">
|
||||||
|
<p>노.코.트(북유럽으로 떠나는 저작권 여행)</p>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#none" class="imgBox">
|
||||||
|
<img src="/visitEdu/usr/publish/images/main/cont5_img3.jpg" alt="">
|
||||||
|
</a>
|
||||||
|
<a href="#none" class="textBox">
|
||||||
|
<p>저작권 어떻게 이용해야 하나요?</p>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul> -->
|
||||||
|
<div class="main_cont_tit">
|
||||||
|
<p>교육자료실</p>
|
||||||
|
</div>
|
||||||
|
<ul class="list">
|
||||||
|
|
||||||
|
<c:forEach var="result" items="${bbsList_2}" varStatus="status">
|
||||||
|
<li onclick="javascript:fn_egov_inqire_notice('<c:out value="${result.bbsId}"/>', '<c:out value="${result.nttId}"/>');">
|
||||||
|
<a href="#none">
|
||||||
|
<p>
|
||||||
|
<c:choose>
|
||||||
|
<c:when test="${result.noticeAt eq 'Y'}">
|
||||||
|
<span class="noticeBox">공지</span><c:out value="${result.nttSj}" />
|
||||||
|
</c:when>
|
||||||
|
<c:otherwise>
|
||||||
|
<c:out value="${result.nttSj}" />
|
||||||
|
</c:otherwise>
|
||||||
|
</c:choose>
|
||||||
|
</p>
|
||||||
|
<span><c:out value="${result.frstRegisterPnttm}" /></span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</c:forEach>
|
||||||
|
</ul>
|
||||||
|
<button type="button" title="교육자료실 더보기" class="main_more" onclick="location.href='${pageContext.request.contextPath}/web/cop/bbsWeb/selectBoardList.do?bbsId=BBSMSTR_000000000681'">더보기</button>
|
||||||
|
</div>
|
||||||
|
<!--// content5 -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<!-- 메인 콘텐츠 시작 -->
|
||||||
|
<%-- <main class="main" id="main">
|
||||||
|
<!-- 메인 비주얼 -->
|
||||||
|
<div class="main_visual">
|
||||||
|
<div class="visual_wrap swiper-container">
|
||||||
|
<ul class="visual_list swiper-wrapper">
|
||||||
|
<c:forEach var="result" varStatus="status" items="${mainzoneList}">
|
||||||
|
<li class="visual_img img01 swiper-slide" style="background-image:url('<c:url value='/uss/ion/pwm/getImage.do'/>?atchFileId=<c:out value="${result.mainzoneImageFile}"/>'); background-repeat: no-repeat; background-position: center;"></li>
|
||||||
|
</c:forEach>
|
||||||
|
<!-- <li class="visual_img img01 swiper-slide"></li> -->
|
||||||
|
<!-- <li class="visual_img img02 swiper-slide"></li>
|
||||||
|
<li class="visual_img img03 swiper-slide"></li> -->
|
||||||
|
</ul>
|
||||||
|
<!-- <div class="visual_nav"></div> -->
|
||||||
|
<div class="visual_util">
|
||||||
|
<c:if test="${fn:length(mainzoneList) > 1}" >
|
||||||
|
<button class="visual_prev" title="비주얼 이미지 이전"></button>
|
||||||
|
<button class="visual_next" title="비주얼 이미지 다음"></button>
|
||||||
|
</c:if>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="inner">
|
||||||
|
<div class="text_area">
|
||||||
|
<p>분쟁을 신속하고 공정하게 해결해주는</p>
|
||||||
|
<span>저작권 시스템</span>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="search_area">
|
||||||
|
<label for="searchInput">검색어 입력</label><input type="text" id="searchInput"><button type="button" class="btn_search" title="검색"></button>
|
||||||
|
<div class="tag_area">
|
||||||
|
<a href="/">#저작권</a>
|
||||||
|
<a href="/">#폰트사용범위</a>
|
||||||
|
<a href="/">#저작권침해</a>
|
||||||
|
<a href="/">#만료저작물</a>
|
||||||
|
<a href="/">#음원저작권</a>
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- //메인 비주얼 -->
|
||||||
|
|
||||||
|
<!-- 바로가기 -->
|
||||||
|
<div class="baro_cont">
|
||||||
|
<div class="inner">
|
||||||
|
<a href="/web/kccadr/adjst/adjstReqRegistInformation.do"><i></i>
|
||||||
|
<p>교육신청</p>
|
||||||
|
</a>
|
||||||
|
<a href="/web/kccadr/accdnt/ai/adjstIncidentList.do?searchStatus=B"><i></i>
|
||||||
|
<p>서류제출</p>
|
||||||
|
</a>
|
||||||
|
<a href="/web/kccadr/accdnt/ai/adjstIncidentList.do"><i></i>
|
||||||
|
<p>신청현황</p>
|
||||||
|
</a>
|
||||||
|
<a href="/web/kccadr/accdnt/ass/AdjustSchStatusList.do"><i></i>
|
||||||
|
<p>조정일정 현황</p>
|
||||||
|
</a>
|
||||||
|
<a href="/web/cop/bbsWeb/selectBoardList.do?bbsId=BBSMSTR_000000000654"><i></i>
|
||||||
|
<p>문의게시판</p>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- //바로가기 -->
|
||||||
|
|
||||||
|
<div class="btm_cont">
|
||||||
|
<div class="inner">
|
||||||
|
<!-- 교육신청 안내 -->
|
||||||
|
<div class="area_info area_cont">
|
||||||
|
<div class="area_top">
|
||||||
|
<p class="tit">교육신청 안내</p>
|
||||||
|
</div>
|
||||||
|
<div class="cont">
|
||||||
|
<div class="bnn_cont">
|
||||||
|
<a href="/web/kccadr/adjst/adjstReq1Regist.do">
|
||||||
|
<i></i>
|
||||||
|
<span> 신청</span>
|
||||||
|
<p>온라인상으로 구비서류 제출 및 수수료 결제</p>
|
||||||
|
</a>
|
||||||
|
<a href="/web/content.do?proFn=9150000">
|
||||||
|
<i></i>
|
||||||
|
<span>오프라인 신청</span>
|
||||||
|
<p>한국저작권위원회로 우편 송달 또는 방문</p>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="area_btm">
|
||||||
|
<div class="tit">
|
||||||
|
<i></i>
|
||||||
|
<p>상담전화</p>
|
||||||
|
</div>
|
||||||
|
<p class="info">
|
||||||
|
<span>02-2669-0042</span>
|
||||||
|
월~금(평일) 09:00~18:00
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- //교육신청 안내 -->
|
||||||
|
|
||||||
|
<!-- 게시판 -->
|
||||||
|
<div class="area_cont area_list">
|
||||||
|
<div class="area_top">
|
||||||
|
<p class="tit">조정사례</p>
|
||||||
|
<div class="cont_util">
|
||||||
|
<button class="btn_plus" onclick="location.href='/web/cop/bbsWeb/selectBoardList.do?bbsId=BBSMSTR_000000000651' " title="공지사항 페이지 이동"><i></i></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cont list_cont">
|
||||||
|
<ul class="list">
|
||||||
|
<c:forEach var="result" items="${bbsList}" varStatus="status">
|
||||||
|
<li onclick="javascript:fn_egov_inqire_notice('<c:out value="${result.bbsId}"/>', '<c:out value="${result.nttId}"/>');">
|
||||||
|
<a href="#">
|
||||||
|
<p class="list_top">
|
||||||
|
<span class="list_tit"><c:if test="${status.count ne '1'}">·</c:if><c:out value="${result.nttSj}" /></span>
|
||||||
|
<span class="list_date"><c:out value="${result.frstRegisterPnttm}" /></span>
|
||||||
|
</p>
|
||||||
|
<c:if test="${status.count eq '1'}">
|
||||||
|
<p class="list_info"><c:out value="${result.nttCn}" escapeXml="false;"/></p>
|
||||||
|
</c:if>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</c:forEach>
|
||||||
|
<!-- <li>
|
||||||
|
<a href="#">
|
||||||
|
<p class="list_top">
|
||||||
|
<span class="list_tit">조정 사례 공개 안내</span>
|
||||||
|
<span class="list_date">2017-05-08</span>
|
||||||
|
</p>
|
||||||
|
<p class="list_info">안녕하세요 조정 사례는 실제 발생한 조정 사례를
|
||||||
|
기준으로 작성되고 있습니다.다만, 조정제도는...</p>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#">
|
||||||
|
<p class="list_top">
|
||||||
|
<span class="list_tit">· 조정 사례 공개 안내</span>
|
||||||
|
<span class="list_date">2017-05-08</span>
|
||||||
|
</p>
|
||||||
|
</a>
|
||||||
|
</li> -->
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- //게시판 -->
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 알림창 -->
|
||||||
|
<div class="area_pz area_cont">
|
||||||
|
<div class="area_top">
|
||||||
|
<p class="tit">알림판</p>
|
||||||
|
<div class="cont_util">
|
||||||
|
<button type="button" class="btn_prev" title="이전알림창 이미지 이동"></button>
|
||||||
|
<button type="button" class="btn_next" title="다음알림창 이미지 이동"></button>
|
||||||
|
<button type="button" class="btn_ctl btn_pause" onclick="pz_ctl(this);" title="알림창 일시정지"></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="cont">
|
||||||
|
<div class=" <c:if test="${fn:length(popupzoneList) > 1}">swiper-container</c:if> pz_wrap">
|
||||||
|
<ul class="pz_list swiper-wrapper">
|
||||||
|
<c:forEach var="result" items="${popupzoneList}" varStatus="status"><!-- 알림창 -->
|
||||||
|
<li class="swiper-slide">
|
||||||
|
<c:set var="popzATitle"></c:set>
|
||||||
|
<c:if test="${result.istarget == 'N'}">
|
||||||
|
<c:set var="popzATitle">새창열림</c:set>
|
||||||
|
</c:if>
|
||||||
|
<c:if test="${result.istarget == 'N'}">
|
||||||
|
<a href="javascript:popzoneOpen('<c:out value='${result.mlink}' />','<c:out value='${result.istarget}' />');" title="새창열림" >
|
||||||
|
</c:if>
|
||||||
|
<c:if test="${result.istarget != 'N'}">
|
||||||
|
<a href="javascript:popzoneOpen('<c:out value='${result.mlink}' />','<c:out value='${result.istarget}' />');">
|
||||||
|
</c:if>
|
||||||
|
<img style="cursor:pointer"
|
||||||
|
onerror="this.src='/images/no_img.jpg'" alt="<c:out value='${result.imgAlt}' /> 알림창"
|
||||||
|
src='<c:url value='/uss/ion/pwm/getImage.do'/>?atchFileId=<c:out value="${result.popupzoneImageFile}"/>' />
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</c:forEach>
|
||||||
|
<!-- <li class="pz_img img01 swiper-slide"></li>
|
||||||
|
<li class="pz_img img02 swiper-slide"></li>
|
||||||
|
<li class="pz_img img03 swiper-slide"></li> -->
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- //알림창 -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main> --%>
|
||||||
|
<!-- // 메인 콘텐츠 종료 -->
|
||||||
|
<form name="frm" action="<c:url value='/web/cop/bbsWeb/selectBoardList.do'/>" method="post">
|
||||||
|
<input type="hidden" name="bbsId" value="" />
|
||||||
|
<input type="hidden" name="nttId" value="" />
|
||||||
|
</form>
|
||||||
|
</html>
|
||||||
@ -1,178 +1,90 @@
|
|||||||
.main {margin-top: 130px; background-color:#eef0f4 ;}
|
.main {margin-top:130px;background-color:#eef0f4;padding:0 0 80px 0;}
|
||||||
.main .inner {max-width: 1400px; width: 100%; padding: 60px 0; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; box-sizing: border-box;}
|
.main .inner {max-width:1400px;width:100%;margin:0 auto;padding:0;display:flex;justify-content: space-between;flex-wrap: wrap;box-sizing: border-box;}
|
||||||
|
|
||||||
/* cont1 */
|
/* visual */
|
||||||
.cont1{position: relative; width: calc(100% - 33% - 50px);}
|
.visual_slide{position:relative;width:100%;height:590px;background-color: #eef0f4;margin:0 auto;z-index:0;overflow:hidden;}
|
||||||
.cont1 .cont1-swiper {overflow:hidden;}
|
.visual_slide .swiper-slide .inner{width:100%;}
|
||||||
.cont1 .swiper-wrapper .swiper-slide {height: 393px; }
|
.visual_slide .swiper-slide .inner .text_area{height:auto;padding:63px 0 0 40px;margin:0 auto;box-sizing:border-box;text-align:center;}
|
||||||
.cont1 .slide_button{position: absolute;bottom: 35px; left: 0;width:auto; z-index: 1;}
|
.visual_slide .swiper-slide .inner .text_area *{line-height: 1.4;color:#182448;}
|
||||||
.cont1 .slide_button:after {content:'';display:block;clear:both;}
|
.visual_slide .swiper-slide .inner .text_area .sub_title{font-size:20px;font-family:'GmarketSansMedium';}
|
||||||
.cont1 .slide_button .swiper-pagination {float:left;position:relative;margin:3px 0 0;}
|
.visual_slide .swiper-slide .inner .text_area .title{font-size:52px;font-family:'GmarketSansBold';}
|
||||||
.cont1 .slide_button .swiper-pagination .swiper-pagination-bullet{float:left;margin-right:7px;position: relative;vertical-align: middle;width: 10px;height: 10px;background-color: #c6c9d1; border-radius: 100%;opacity:1;}
|
.visual_slide .swiper-slide .inner .text_area .summary{font-size:18px;}
|
||||||
.cont1 .slide_button .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{width: 40px;background-color: #f37632;border-radius:10px;vertical-align: middle;}
|
.visual_slide .swiper-slide .inner .text_area a{display:flex;width:145px;height:38px;font-size: 18px;color:#182448;background-color:#fff;padding:0 20px;margin:33px auto 0 auto;border-radius:26px;align-items:center;justify-content:space-between;box-sizing:border-box;}
|
||||||
.cont1 .slidePause {float:left;background-image: url(../images/main/visualStop.png);background-repeat: no-repeat;width: 16px;height: 16px;}
|
.visual_slide .slide_control{position:relative;width:100%;bottom:20px;}
|
||||||
.cont1 .slideStart {float:left;background-image: url(../images/main/visualStart.png);background-repeat: no-repeat;width: 16px;height: 16px;}
|
.visual_slide .slide_control .inner{position:relative;justify-content:center;align-items:center;}
|
||||||
.cont1 .swiper-slide .txt1 {font-size: 22px; color: #333; padding-top: 30px; letter-spacing: -1px;}
|
.visual_slide .slide_control .swiper-pagination{position: relative;}
|
||||||
.cont1 .swiper-slide .txt2 {font-size: 46px; color: #000; padding: 15px 0 30px 0; letter-spacing: -2px; font-family: 'LotteMartHappy';}
|
.visual_slide .slide_control .swiper-pagination-bullet{background-color:#19222d;opacity:0.5;margin:0 4px;}
|
||||||
.cont1 .swiper-slide span {font-size: 17px; font-weight: 300; color: #666; display: block; line-height: 1.4; letter-spacing: -0.5px;}
|
.visual_slide .slide_control .swiper-pagination-bullet-active{opacity:1;}
|
||||||
.cont1 .swiper-slide button {width: 175px; height: 50px; padding-left: 22px; border: 1px solid #cbd0da; border-radius: 24.5px; margin-top: 40px; background-color: #fff; background-image: url(../images/main/btn_arrow.png); background-repeat: no-repeat; background-position: 90% 50%; font-size: 18px; color: #60656d; text-align: left; vertical-align: middle;}
|
.visual_slide .slide_control .slide_pause,.visual_slide .slide_control .slide_play{position:relative;width:8px;height:10px;z-index:10;margin: 5px 0 0 8px;}
|
||||||
.cont1 .cont1-swiper .swiper-slide {min-height:393px; background-repeat: no-repeat; background-position: right center;}
|
.visual_slide .slide_control .slide_pause{background:url(/offeduadvc/visitEdu/usr/publish/images/main/btn_main_visual_pause.png);}
|
||||||
.swiper-wrapper {height:auto;}
|
.visual_slide .slide_control .slide_play{background:url(/offeduadvc/visitEdu/usr/publish/images/main/btn_main_visual_play.png);}
|
||||||
.swiper .swiper-notification {display:none;}
|
.visual_slide .btn_prev_slide,.visual_slide .btn_next_slide{position:absolute;width:50px;height:50px;text-indent:-9999em;overflow:hidden;top:50%;z-index:10;transform:translateY(-50%);}
|
||||||
|
.visual_slide .btn_prev_slide{background:url(/offeduadvc/visitEdu/usr/publish/images/main/btn_main_visual_arrow_right.png) no-repeat;left:77px;}
|
||||||
|
.visual_slide .btn_next_slide{background:url(/offeduadvc/visitEdu/usr/publish/images/main/btn_main_visual_arrow_left.png) no-repeat;left:calc(100% - 97px);}
|
||||||
|
|
||||||
|
.visual_slide .swiper-slide[aria-label="1 / 5"]{background:url(/offeduadvc/visitEdu/usr/publish/images/main/main_visual_01.jpg) no-repeat;}
|
||||||
|
.visual_slide .swiper-slide[aria-label="2 / 5"]{background:url(/offeduadvc/visitEdu/usr/publish/images/main/main_visual_02.jpg) no-repeat;}
|
||||||
|
.visual_slide .swiper-slide[aria-label="3 / 5"]{background:url(/offeduadvc/visitEdu/usr/publish/images/main/main_visual_03.jpg) no-repeat;}
|
||||||
|
.visual_slide .swiper-slide[aria-label="4 / 5"]{background:url(/offeduadvc/visitEdu/usr/publish/images/main/main_visual_04.jpg) no-repeat;}
|
||||||
|
.visual_slide .swiper-slide[aria-label="5 / 5"]{background:url(/offeduadvc/visitEdu/usr/publish/images/main/main_visual_05.jpg) no-repeat;}
|
||||||
|
|
||||||
/* cont2 */
|
/* main_banner_link */
|
||||||
.cont2 {position: relative; width: 33%; max-width: 450px;}
|
.container .main_banner_link{position:relative;height:130px;margin:60px auto 70px auto;}
|
||||||
.cont2 .cont2-swiper {overflow:hidden;position:relative;/*height:388px;*/border-radius:30px 5px 30px 5px;}
|
.container .main_banner_link li{position:relative;display:flex;width:calc((100%/5) - 12px);height:100%;background-color:#fff;border-radius:5px;box-shadow:0 0 5px rgba(45,55,90,0.2);align-items:center;transition:all 0.3s ease-in-out;}
|
||||||
.cont2 .cont2-swiper .swiper-slide .mobile_banner {display:none;}
|
.container .main_banner_link li::after{position:absolute;content:" ";width: calc(100% + 10px);height:calc(100% + 10px);border:3px solid transparent;left:-8px;border-radius:10px;}
|
||||||
.cont2 .cont2-swiper .slide_button {position: absolute;bottom: 0; left: 0; z-index: 4; width: 100%; height: 50px; background-color: rgba(0,0,0,0.1); border-radius: 0 0 30px 5px; text-align: center;}
|
.container .main_banner_link li:hover{z-index: 15;}
|
||||||
.cont2 .cont2-swiper .slide_button .control {overflow:hidden;position:relative;display:inline-block;width:92px;margin:15px auto 0;}
|
.container .main_banner_link li:hover::after{border:3px solid #e95504;background-color:#fff;box-shadow:0 0 15px rgba(233,85,4,0.3);}
|
||||||
.cont2 .cont2-swiper .slide_button .swiper-button-next {position:absolute;top:0;left:initial;right:0;width:9px;height:16px;margin:0;vertical-align:top;background:url(../images/main/cont2_right.png) no-repeat left top;background-size:9px 16px;}
|
.container .main_banner_link li a{position:relative;width:100%;text-align:center;z-index:15;}
|
||||||
.cont2 .cont2-swiper .slide_button .swiper-button-prev {position:absolute;top:0;left:0;right:initial;width:9px;height:16px;margin:0;vertical-align:top;background:url(../images/main/cont2_left.png) no-repeat left top;background-size:9px 16px;z-index:11;}
|
.container .main_banner_link i{display:block;width:68px;height:68px;margin:0 auto 10px auto;border-radius:100%;background-repeat:no-repeat;}
|
||||||
.cont2 .cont2-swiper .slide_button .swiper-pagination {position:relative;bottom:0;float:left;width:100%;font-size:16px;vertical-align:top;color:#fff;}
|
.container .main_banner_link .banner_link_01 i{background-image:url(/offeduadvc/visitEdu/usr/publish/images/main/icon_main_visual_01.png);}
|
||||||
.cont2 .cont2-swiper .slide_button .slidePause {display:inline-block;background-image: url(../images/main/visualStop2.png);background-repeat: no-repeat;width:16px;height:16px;margin:15px 0 0 15px;}
|
.container .main_banner_link .banner_link_02 i{background-image:url(/offeduadvc/visitEdu/usr/publish/images/main/icon_main_visual_02.png);}
|
||||||
.cont2 .cont2-swiper .slide_button .slideStart {display:inline-block;background-image: url(../images/main/visualStart2.png);background-repeat: no-repeat;width:16px;height:16px;margin:15px 0 0 15px;}
|
.container .main_banner_link .banner_link_03 i{background-image:url(/offeduadvc/visitEdu/usr/publish/images/main/icon_main_visual_03.png);}
|
||||||
|
.container .main_banner_link .banner_link_04 i{background-image:url(/offeduadvc/visitEdu/usr/publish/images/main/icon_main_visual_04.png);}
|
||||||
|
.container .main_banner_link .banner_link_05 i{background-image:url(/offeduadvc/visitEdu/usr/publish/images/main/icon_main_visual_05.png);}
|
||||||
|
.container .main_banner_link li span{color:#e95504;font-weight:500;}
|
||||||
|
|
||||||
/* cont3 */
|
/* 하단콘텐츠 공통 */
|
||||||
.cont3 {width: 100%; margin: 50px 0; display: flex;}
|
.wrap .content_wrap{width:calc((100% - 72px)/3);}
|
||||||
.cont3 .cont3_tit {width: 230px;border-radius: 30px 0 0 5px; background-color: #e95504; align-self: center; text-align: center; padding: 34.5px 0; background-image: url(../images/main/cont3_tit_img.png); background-repeat: no-repeat; background-position: 87% center; box-sizing: border-box;}
|
.wrap .content_wrap .content{height:332px;}
|
||||||
.cont3 .cont3_tit p {padding-right: 30px; font-size: 21px; font-weight: 400; color: #fff;}
|
.wrap .content_wrap>.title{display:flex;width:100%;justify-content:space-between;align-items:center;margin:0 0 10px 0;}
|
||||||
.cont3 .cont3_cont {display: flex; width: calc(100% - 230px); height: 90px; border-radius: 0 5px 30px 0; background-color: #fff; align-items: center;}
|
.wrap .content_wrap>.title h3{position:relative;font-size:28px;font-weight:bold;padding:0 0 0 20px;}
|
||||||
.cont3 .cont3_cont>div {width: calc(100%/4); position: relative; background-repeat: no-repeat; background-position: 30px center;}
|
.wrap .content_wrap>.title h3::after{position:absolute;content:" ";width:6px;height:6px;border:3px solid #e95504;border-radius:100%;left:0;top:9px;}
|
||||||
.cont3 .cont3_cont>div::after {content: ""; width: 1px; height: 90px; background-color: #e5e5e5; position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
|
.wrap .content_wrap .title .btn_plus{display:flex;width:65px;height:30px;background:#fff url(/offeduadvc/visitEdu/usr/publish/images/main/btn_plus.png) no-repeat calc(100% + 4px) center;padding:0 4px 0 8px;overflow:hidden;text-align:left;color:#666;line-height:1.6;border:1px solid #d5d5d5;border-radius:5px;justify-content:flex-start;align-items:center;transition:all 0.1s ease-in;}
|
||||||
.cont3 .cont3_cont>div:last-child:after {content: none;}
|
.wrap .content_wrap .title .btn_plus:hover{border:1px solid #e95504;background:#fff url(/offeduadvc/visitEdu/usr/publish/images/main/btn_plus_hover.png) no-repeat calc(100% + 4px) center;color:#e95504;}
|
||||||
.cont3 .cont3_cont>div p {position:relative;font-size: 18px;}
|
|
||||||
.cont3 .cont3_cont>div p span {display:block;font-size: 18px; color: #E95504; padding-top: 7px;}
|
|
||||||
.cont3 .cont3_cont>div p .mo_text {display:none;}
|
|
||||||
.cont3 .cont3_cont>div p a {position:relative;height:90px;padding:0 30px 0 100px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;}
|
|
||||||
.cont3 .cont3_cont .cont3_cont_1 {background-image: url(../images/main/cont3_img1.png);}
|
|
||||||
.cont3 .cont3_cont .cont3_cont_2 {background-image: url(../images/main/cont3_img2.png);}
|
|
||||||
.cont3 .cont3_cont .cont3_cont_3 {background-image: url(../images/main/cont3_img3.png);}
|
|
||||||
/*.cont3 .cont3_cont .cont3_cont_3 p a {padding-top:35px;}*/
|
|
||||||
.cont3 .cont3_cont .cont3_cont_4 {background-image: url(../images/main/cont3_img4.png);}
|
|
||||||
/*.cont3 .cont3_cont .cont3_cont_4 p a {padding-top:35px;}*/
|
|
||||||
|
|
||||||
/* cont4,5 */
|
/* 공지사항 */
|
||||||
.cont4, .cont5 {width: calc(100%/2 - 25px); min-height: 204px; padding: 40px; border-radius: 25px 5px 25px 5px; background-color: #fff; box-sizing: border-box; position: relative;}
|
.wrap .notice .content{padding:15px 45px;background-color:#fff;border:1px solid #d5d5d5;border-radius: 5px;box-shadow:0 0 5px rgba(0,0,0,0.15);box-sizing:border-box;}
|
||||||
.main_cont_tit {display: flex; justify-content: space-between;}
|
.wrap .notice .emphasis{display: inline-flex;width:40px;height:20px;justify-content:center;align-items:center;background-color:#e95504;font-size:14px;font-weight:400;color:#fff;border-radius:5px;margin:0 8px 0 0;}
|
||||||
.main_cont_tit p {font-size: 25px; font-weight: 600;}
|
.wrap .notice .notice_list li{border-bottom: 1px solid #d5d5d5;}
|
||||||
button.main_more {background-image: url(../images/main/main_cont_more.png); background-repeat: no-repeat; background-position: right center; padding-right: 30px; font-size: 17px; color: #777772; font-weight: 300; position: absolute; top: 40px; right: 40px;}
|
.wrap .notice .notice_list li:last-child{border:0;}
|
||||||
|
.wrap .notice .notice_list li a{display:flex;height:50px;justify-content:space-between;align-items:center;transition:all 0.1s ease-in;}
|
||||||
|
.wrap .notice .notice_list li:hover a{color:#e95504;transition:all 0.15s ease-in-out;}
|
||||||
|
.wrap .notice .date{display:flex;min-width:110px;font-size:16px;color:#666;align-items:center;font-weight:300;}
|
||||||
|
.wrap .notice .notice_list li:hover .date{color:#e95504;}
|
||||||
|
.wrap .notice .date i{display:inline-block;width:4px;height:4px;background:#e95504;margin:2px 6px 0 0;border-radius:100%;}
|
||||||
|
.wrap .notice .notice_list .title{width: calc(100% - 115px);font-size:18px;font-weight:500;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;line-height: 1.4;}
|
||||||
|
|
||||||
/* cont4 */
|
/* 자료실 */
|
||||||
.cont4 .list {margin-top: 33px;}
|
.wrap .data_notice .notice_list{display:flex;height:100%;align-items:stretch;flex-flow:wrap;justify-content:space-between;flex-direction:column;}
|
||||||
.cont4 .list li {margin-bottom: 14px;}
|
.wrap .data_notice .notice_list li{width:100%;padding:15.5px 45px;background-color:#fff;border:1px solid #d5d5d5;border-radius: 5px;box-shadow:0 0 5px rgba(0,0,0,0.15);box-sizing:border-box;transition:all 0.05s ease-in-out;}
|
||||||
.cont4 .list li:hover a p {text-decoration: underline;}
|
.wrap .data_notice .notice_list li:hover{border:1px solid #e95504;transition:all 0.05s ease-in-out;}
|
||||||
.cont4 .list li:last-child {margin-bottom: 0;}
|
.wrap .data_notice .notice_list li .title{font-size: 18px;font-weight:500;align-items:center;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;line-height:1.2;transition:all 0.05s ease-in-out;}
|
||||||
.cont4 .list li a {display: flex; justify-content: space-between; align-items: center;}
|
.wrap .data_notice .notice_list li .title i{display:inline-block;width:4px;height:4px;background:#e95504;margin:0 6px 5px 0;border-radius:100%;}
|
||||||
.cont4 .list li p {width: calc(100% - 100px); font-size: 18px; font-weight: 300; color: #666; overflow: hidden; text-overflow: ellipsis;-webkit-line-clamp: 1; white-space: nowrap; vertical-align: middle;}
|
.wrap .data_notice .notice_list li .date{margin:4.5px 0 0 8px;color:#666;font-weight:300;transition:all 0.05s ease-in-out;}
|
||||||
.cont4 .list li a span {color: #777772; font-weight: 300; font-size: 16px; line-height: 26px; vertical-align: top;}
|
.wrap .data_notice .notice_list li:hover .title,.wrap .data_notice .notice_list li:hover .date{color:#e95504;transition:all 0.05s ease-in-out;}
|
||||||
.cont4 .list li a p .noticeBox {width: 57px; line-height: 0; padding: 12px 0; border: 1px solid #d14001; border-radius: 13px; margin-right: 4px; color: #d14001; display: inline-block; text-align: center; vertical-align: revert;}
|
|
||||||
|
|
||||||
/* cont5 */
|
/* 알림판 */
|
||||||
.cont5 .list {display: flex; justify-content: space-between; margin-top: 28px;}
|
.wrap .notify .notify_control{display:flex;height:30px;background-color:#fff;border:1px solid #d5d5d5;border-radius:5px;padding:0 4px 0 0;}
|
||||||
.cont5 .list li {width: calc(100%/3 - 12.5px);}
|
.wrap .notify .notify_control>*{position:unset;width:23px;height:30px;font-size:16px;color:#888;text-align:center;line-height:28px;letter-spacing:-1.7px;margin: 0 0 0 -1px;}
|
||||||
.cont5 .list li:hover p {text-decoration: underline;}
|
.wrap .notify .notify_control .slide_number{width:35px;}
|
||||||
.cont5 .list li a {display: block;}
|
.wrap .notify .notify_control .swiper-button-prev,.wrap .notify .notify_control .swiper-button-next{background-size:auto;}
|
||||||
.cont5 .list li .imgBox {height: 130px; overflow: hidden; background-color: #e5e5e5;}
|
.wrap .notify .notify_control .swiper-button-prev::after,.wrap .notify .notify_control .swiper-button-next::after{display: none;}
|
||||||
.cont5 .list li .imgBox img {height: 100%;}
|
.wrap .notify .notify_control .swiper-button-prev{background-image:url(/offeduadvc/visitEdu/usr/publish/images/main/btn_arrow_right.png);background-position-x:-2px;}
|
||||||
.cont5 .list li .textBox p {font-size: 18px; font-weight: 300; color: #666; line-height: 1.3; letter-spacing: -0.5px; margin-top: 17px; -webkit-line-clamp: 2; overflow: hidden; display: -webkit-box;}
|
.wrap .notify .notify_control .swiper-button-next{background-image:url(/offeduadvc/visitEdu/usr/publish/images/main/btn_arrow_left.png);}
|
||||||
|
.wrap .notify .notify_control .swiper-button-prev:hover{background-image:url(/offeduadvc/visitEdu/usr/publish/images/main/btn_arrow_right_hover.png);}
|
||||||
|
.wrap .notify .notify_control .swiper-button-next:hover{background-image:url(/offeduadvc/visitEdu/usr/publish/images/main/btn_arrow_left_hover.png);}
|
||||||
|
.wrap .notify .notify_control .slide_pause,.wrap .notify .notify_control .slide_play{height: 30px;margin: 0 0 0 -0.5px;}
|
||||||
|
.wrap .notify .notify_control .slide_pause{background:url(/offeduadvc/visitEdu/usr/publish/images/main/btn_pause.png) no-repeat center center;}
|
||||||
|
.wrap .notify .notify_control .slide_play{background:url(/offeduadvc/visitEdu/usr/publish/images/main/btn_play.png) no-repeat center center;}
|
||||||
|
.wrap .notify .content{width:100%;height:332px;overflow: hidden;border-radius:5px;}
|
||||||
|
|
||||||
@media all and (max-width: 1280px){
|
|
||||||
/* main latout */
|
|
||||||
.main .inner {padding:60px 20px;}
|
|
||||||
.cont1 {width:calc(100% - 450px);}
|
|
||||||
.cont2 {min-width:450px;}
|
|
||||||
.cont3 .cont3_tit {width:200px;background-position:90% center;}
|
|
||||||
.cont3 .cont3_cont {width: calc(100% - 200px);}
|
|
||||||
.cont3 .cont3_tit p {font-size:19px;}
|
|
||||||
.cont3 .cont3_cont>div {background-position:15px center;}
|
|
||||||
.cont3 .cont3_cont>div p {font-size:16px;}
|
|
||||||
.cont3 .cont3_cont>div p a {padding:0 15px 0 80px;}
|
|
||||||
.cont3 .cont3_cont>div p span {left:80px;bottom:20px;font-size:16px;}
|
|
||||||
/*.cont3 .cont3_cont .cont3_cont_3 p a,
|
|
||||||
.cont3 .cont3_cont .cont3_cont_4 p a {padding-top:20px;}*/
|
|
||||||
}
|
|
||||||
|
|
||||||
@media all and (max-width: 1024px){
|
|
||||||
/* main latout */
|
|
||||||
.cont1 {width:100%;}
|
|
||||||
|
|
||||||
.cont2 {width:100%;max-width:100%;min-width:auto;}
|
|
||||||
.cont2 .cont2-swiper .swiper-slide img {display:none;width:100%;}
|
|
||||||
.cont2 .cont2-swiper .swiper-slide .mobile_banner {display:block;}
|
|
||||||
|
|
||||||
.cont3 {display:block;}
|
|
||||||
.cont3 .cont3_tit {width:100%;padding:14px 30px 15px;text-align:left;background-position:right 20px center;border-radius:30px 5px 0 0;}
|
|
||||||
.cont3 .cont3_cont {display:block;width:100%;height:auto;border-radius:0 0 30px 5px;}
|
|
||||||
.cont3 .cont3_cont:after {content:'';display:block;clear:both;}
|
|
||||||
.cont3 .cont3_cont>div {float:left;width:50%;height:80px;line-height:40px;background-position:20px center;box-sizing:border-box;}
|
|
||||||
.cont3 .cont3_cont>div:after {height:100%;}
|
|
||||||
.cont3 .cont3_cont>div p {overflow:hidden;}
|
|
||||||
.cont3 .cont3_cont>div p a {height:80px;justify-content:flex-start;align-items:center;flex-direction:row;}
|
|
||||||
.cont3 .cont3_cont>div p span {display:none;}
|
|
||||||
.cont3 .cont3_cont>div p span.mo_text {display:block;float:left;padding:0 4px 0 0;color:#222}
|
|
||||||
.cont3 .cont3_cont>.cont3_cont_1 {border-bottom:1px solid #cbd0da;}
|
|
||||||
.cont3 .cont3_cont>.cont3_cont_1 p {padding:0;}
|
|
||||||
.cont3 .cont3_cont>.cont3_cont_1 span {position:static;left:initial;bottom:initial;}
|
|
||||||
.cont3 .cont3_cont>.cont3_cont_2 {border-bottom:1px solid #cbd0da;}
|
|
||||||
.cont3 .cont3_cont>.cont3_cont_2:after {display:none;}
|
|
||||||
.cont3 .cont3_cont>.cont3_cont_2 p {padding:0;}
|
|
||||||
.cont3 .cont3_cont>.cont3_cont_2 span {position:static;left:initial;bottom:initial;}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 모바일 */
|
|
||||||
@media screen and (max-width: 767px){
|
|
||||||
/* 1207 - 수정 */
|
|
||||||
.main {margin:0;padding:70px 0 0;}
|
|
||||||
/* //1207 - 수정 */
|
|
||||||
.main .inner {padding:0 10px 35px;}
|
|
||||||
.cont1 {width:100%;}
|
|
||||||
.cont1 .cont1-swiper .swiper-slide {height:auto;padding:0 0 45px;background-image:url(../images/main/m_cont1_bg1.png);background-size:contain;}
|
|
||||||
.cont1 .cont1-swiper .swiper-slide .txt1 {font-size:14px;margin:0 0 0 6px;}
|
|
||||||
.cont1 .cont1-swiper .swiper-slide .txt2 {margin:0 0 0 6px;padding:8px 0 6px;font-size:18px;}
|
|
||||||
.cont1 .cont1-swiper .swiper-slide span {margin:0 0 0 6px;font-size:14px;}
|
|
||||||
.cont1 .cont1-swiper .swiper-slide button {width:130px;height:40px;margin:10px 0 0 6px;padding:0 0 0 20px;font-size:14px;background-size:4px auto;background-position:90% center;}
|
|
||||||
.cont1 .cont1-swiper .slide_button {left:6px;bottom:10px;}
|
|
||||||
.cont1 .slide_button .swiper-pagination {margin:0;}
|
|
||||||
.cont1 .slide_button .swiper-pagination .swiper-pagination-bullet {width:7px;height:7px;}
|
|
||||||
.cont1 .slide_button .swiper-pagination .swiper-pagination-bullet:last-child {margin:0;}
|
|
||||||
.cont1 .slideStart {width:30px;height:30px;margin:-11px 0 0;background-size:16px 16px;background-position:center center;}
|
|
||||||
.cont1 .slidePause {width:30px;height:30px;margin:-11px 0 0;background-size:14px 16px;background-position:center center;}
|
|
||||||
|
|
||||||
.cont2 .cont2-swiper .slide_button {height:40px;border-radius:0 0 15px 5px;}
|
|
||||||
.cont2 .cont2-swiper .slide_button .control,
|
|
||||||
.cont2 .cont2-swiper .slide_button .slideStart,
|
|
||||||
.cont2 .cont2-swiper .slide_button .slidePause {margin-top:10px;}
|
|
||||||
|
|
||||||
.cont3 {margin:15px 0 20px;}
|
|
||||||
.cont3 .cont3_tit {padding:9px 20px 10px;background-size:11px;border-radius:20px 5px 0 0;}
|
|
||||||
.cont3 .cont3_tit p {font-size:15px;}
|
|
||||||
.cont3 .cont3_cont {box-shadow:1px 1px 20px 0px rgba(45, 55, 90, 0.15);}
|
|
||||||
.cont3 .cont3_cont>div {display:flex;height:60px;font-size:14px;line-height:20px;align-items:center;background-size:30px;background-position:10px center;}
|
|
||||||
.cont3 .cont3_cont>div p {font-size:14px;}
|
|
||||||
.cont3 .cont3_cont>div p a {height:60px;padding:0 10px 0 50px;}
|
|
||||||
.cont3 .cont3_cont>div p span {font-size:14px;}
|
|
||||||
/* .cont3 .cont3_cont>div:first-child p a,
|
|
||||||
.cont3 .cont3_cont>div:nth-child(2) p a {padding-top:10px;} */
|
|
||||||
|
|
||||||
.cont4 {width:100%;margin:0 0 20px;padding:20px;border-radius:20px 5px 20px 5px;box-shadow:1px 1px 20px 0px rgba(45, 55, 90, 0.15);}
|
|
||||||
.cont4 .main_cont_tit p {font-size:20px;}
|
|
||||||
button.main_more {padding-right:20px;font-size:14px;line-height:20px;background-size:15px;top:20px;right:20px;}
|
|
||||||
.cont4 .list {margin:17px 0 0;}
|
|
||||||
.cont4 .list li {margin-bottom: 6px;}
|
|
||||||
.cont4 .list li a p {width:calc(100% - 80px); font-size:14px;}
|
|
||||||
.cont4 .list li a p .noticeBox {width:45px; padding:10px 0; font-size:14px;}
|
|
||||||
.cont4 .list li a > span {font-size:14px;line-height:24px;}
|
|
||||||
|
|
||||||
.cont5 {width:100%;margin:0;padding:20px;border-radius:20px 5px 20px 5px;box-shadow:1px 1px 20px 0px rgba(45, 55, 90, 0.15);}
|
|
||||||
.cont5 .main_cont_tit p {font-size:20px;}
|
|
||||||
.cont5 .main_cont_tit button {padding-right:20px;font-size:14px;line-height:20px;background-size:15px;}
|
|
||||||
.cont5 .list {overflow:hidden;display:block;margin:17px 0 0;}
|
|
||||||
.cont5 .list li {float:left;width:calc(50% - 18px);}
|
|
||||||
.cont5 .list li:nth-child(2) {float:right;}
|
|
||||||
.cont5 .list li:nth-child(n+3) {display:none;}
|
|
||||||
.cont5 .list li .imgBox {height:auto;}
|
|
||||||
.cont5 .list li .imgBox img {width:100%;height:auto;}
|
|
||||||
.cont5 .list li .textBox p {margin:10px 0 0;font-size:14px;}
|
|
||||||
|
|
||||||
}
|
|
||||||
178
src/main/webapp/visitEdu/usr/publish/css/main_bak_231011.css
Normal file
178
src/main/webapp/visitEdu/usr/publish/css/main_bak_231011.css
Normal file
@ -0,0 +1,178 @@
|
|||||||
|
.main {margin-top: 130px; background-color:#eef0f4 ;}
|
||||||
|
.main .inner {max-width: 1400px; width: 100%; padding: 60px 0; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; box-sizing: border-box;}
|
||||||
|
|
||||||
|
/* cont1 */
|
||||||
|
.cont1{position: relative; width: calc(100% - 33% - 50px);}
|
||||||
|
.cont1 .cont1-swiper {overflow:hidden;}
|
||||||
|
.cont1 .swiper-wrapper .swiper-slide {height: 393px; }
|
||||||
|
.cont1 .slide_button{position: absolute;bottom: 35px; left: 0;width:auto; z-index: 1;}
|
||||||
|
.cont1 .slide_button:after {content:'';display:block;clear:both;}
|
||||||
|
.cont1 .slide_button .swiper-pagination {float:left;position:relative;margin:3px 0 0;}
|
||||||
|
.cont1 .slide_button .swiper-pagination .swiper-pagination-bullet{float:left;margin-right:7px;position: relative;vertical-align: middle;width: 10px;height: 10px;background-color: #c6c9d1; border-radius: 100%;opacity:1;}
|
||||||
|
.cont1 .slide_button .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{width: 40px;background-color: #f37632;border-radius:10px;vertical-align: middle;}
|
||||||
|
.cont1 .slidePause {float:left;background-image: url(../images/main/visualStop.png);background-repeat: no-repeat;width: 16px;height: 16px;}
|
||||||
|
.cont1 .slideStart {float:left;background-image: url(../images/main/visualStart.png);background-repeat: no-repeat;width: 16px;height: 16px;}
|
||||||
|
.cont1 .swiper-slide .txt1 {font-size: 22px; color: #333; padding-top: 30px; letter-spacing: -1px;}
|
||||||
|
.cont1 .swiper-slide .txt2 {font-size: 46px; color: #000; padding: 15px 0 30px 0; letter-spacing: -2px; font-family: 'LotteMartHappy';}
|
||||||
|
.cont1 .swiper-slide span {font-size: 17px; font-weight: 300; color: #666; display: block; line-height: 1.4; letter-spacing: -0.5px;}
|
||||||
|
.cont1 .swiper-slide button {width: 175px; height: 50px; padding-left: 22px; border: 1px solid #cbd0da; border-radius: 24.5px; margin-top: 40px; background-color: #fff; background-image: url(../images/main/btn_arrow.png); background-repeat: no-repeat; background-position: 90% 50%; font-size: 18px; color: #60656d; text-align: left; vertical-align: middle;}
|
||||||
|
.cont1 .cont1-swiper .swiper-slide {min-height:393px; background-repeat: no-repeat; background-position: right center;}
|
||||||
|
.swiper-wrapper {height:auto;}
|
||||||
|
.swiper .swiper-notification {display:none;}
|
||||||
|
|
||||||
|
|
||||||
|
/* cont2 */
|
||||||
|
.cont2 {position: relative; width: 33%; max-width: 450px;}
|
||||||
|
.cont2 .cont2-swiper {overflow:hidden;position:relative;/*height:388px;*/border-radius:30px 5px 30px 5px;}
|
||||||
|
.cont2 .cont2-swiper .swiper-slide .mobile_banner {display:none;}
|
||||||
|
.cont2 .cont2-swiper .slide_button {position: absolute;bottom: 0; left: 0; z-index: 4; width: 100%; height: 50px; background-color: rgba(0,0,0,0.1); border-radius: 0 0 30px 5px; text-align: center;}
|
||||||
|
.cont2 .cont2-swiper .slide_button .control {overflow:hidden;position:relative;display:inline-block;width:92px;margin:15px auto 0;}
|
||||||
|
.cont2 .cont2-swiper .slide_button .swiper-button-next {position:absolute;top:0;left:initial;right:0;width:9px;height:16px;margin:0;vertical-align:top;background:url(../images/main/cont2_right.png) no-repeat left top;background-size:9px 16px;}
|
||||||
|
.cont2 .cont2-swiper .slide_button .swiper-button-prev {position:absolute;top:0;left:0;right:initial;width:9px;height:16px;margin:0;vertical-align:top;background:url(../images/main/cont2_left.png) no-repeat left top;background-size:9px 16px;z-index:11;}
|
||||||
|
.cont2 .cont2-swiper .slide_button .swiper-pagination {position:relative;bottom:0;float:left;width:100%;font-size:16px;vertical-align:top;color:#fff;}
|
||||||
|
.cont2 .cont2-swiper .slide_button .slidePause {display:inline-block;background-image: url(../images/main/visualStop2.png);background-repeat: no-repeat;width:16px;height:16px;margin:15px 0 0 15px;}
|
||||||
|
.cont2 .cont2-swiper .slide_button .slideStart {display:inline-block;background-image: url(../images/main/visualStart2.png);background-repeat: no-repeat;width:16px;height:16px;margin:15px 0 0 15px;}
|
||||||
|
|
||||||
|
/* cont3 */
|
||||||
|
.cont3 {width: 100%; margin: 50px 0; display: flex;}
|
||||||
|
.cont3 .cont3_tit {width: 230px;border-radius: 30px 0 0 5px; background-color: #e95504; align-self: center; text-align: center; padding: 34.5px 0; background-image: url(../images/main/cont3_tit_img.png); background-repeat: no-repeat; background-position: 87% center; box-sizing: border-box;}
|
||||||
|
.cont3 .cont3_tit p {padding-right: 30px; font-size: 21px; font-weight: 400; color: #fff;}
|
||||||
|
.cont3 .cont3_cont {display: flex; width: calc(100% - 230px); height: 90px; border-radius: 0 5px 30px 0; background-color: #fff; align-items: center;}
|
||||||
|
.cont3 .cont3_cont>div {width: calc(100%/4); position: relative; background-repeat: no-repeat; background-position: 30px center;}
|
||||||
|
.cont3 .cont3_cont>div::after {content: ""; width: 1px; height: 90px; background-color: #e5e5e5; position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
|
||||||
|
.cont3 .cont3_cont>div:last-child:after {content: none;}
|
||||||
|
.cont3 .cont3_cont>div p {position:relative;font-size: 18px;}
|
||||||
|
.cont3 .cont3_cont>div p span {display:block;font-size: 18px; color: #E95504; padding-top: 7px;}
|
||||||
|
.cont3 .cont3_cont>div p .mo_text {display:none;}
|
||||||
|
.cont3 .cont3_cont>div p a {position:relative;height:90px;padding:0 30px 0 100px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;}
|
||||||
|
.cont3 .cont3_cont .cont3_cont_1 {background-image: url(../images/main/cont3_img1.png);}
|
||||||
|
.cont3 .cont3_cont .cont3_cont_2 {background-image: url(../images/main/cont3_img2.png);}
|
||||||
|
.cont3 .cont3_cont .cont3_cont_3 {background-image: url(../images/main/cont3_img3.png);}
|
||||||
|
/*.cont3 .cont3_cont .cont3_cont_3 p a {padding-top:35px;}*/
|
||||||
|
.cont3 .cont3_cont .cont3_cont_4 {background-image: url(../images/main/cont3_img4.png);}
|
||||||
|
/*.cont3 .cont3_cont .cont3_cont_4 p a {padding-top:35px;}*/
|
||||||
|
|
||||||
|
/* cont4,5 */
|
||||||
|
.cont4, .cont5 {width: calc(100%/2 - 25px); min-height: 204px; padding: 40px; border-radius: 25px 5px 25px 5px; background-color: #fff; box-sizing: border-box; position: relative;}
|
||||||
|
.main_cont_tit {display: flex; justify-content: space-between;}
|
||||||
|
.main_cont_tit p {font-size: 25px; font-weight: 600;}
|
||||||
|
button.main_more {background-image: url(../images/main/main_cont_more.png); background-repeat: no-repeat; background-position: right center; padding-right: 30px; font-size: 17px; color: #777772; font-weight: 300; position: absolute; top: 40px; right: 40px;}
|
||||||
|
|
||||||
|
/* cont4 */
|
||||||
|
.cont4 .list {margin-top: 33px;}
|
||||||
|
.cont4 .list li {margin-bottom: 14px;}
|
||||||
|
.cont4 .list li:hover a p {text-decoration: underline;}
|
||||||
|
.cont4 .list li:last-child {margin-bottom: 0;}
|
||||||
|
.cont4 .list li a {display: flex; justify-content: space-between; align-items: center;}
|
||||||
|
.cont4 .list li p {width: calc(100% - 100px); font-size: 18px; font-weight: 300; color: #666; overflow: hidden; text-overflow: ellipsis;-webkit-line-clamp: 1; white-space: nowrap; vertical-align: middle;}
|
||||||
|
.cont4 .list li a span {color: #777772; font-weight: 300; font-size: 16px; line-height: 26px; vertical-align: top;}
|
||||||
|
.cont4 .list li a p .noticeBox {width: 57px; line-height: 0; padding: 12px 0; border: 1px solid #d14001; border-radius: 13px; margin-right: 4px; color: #d14001; display: inline-block; text-align: center; vertical-align: revert;}
|
||||||
|
|
||||||
|
/* cont5 */
|
||||||
|
.cont5 .list {display: flex; justify-content: space-between; margin-top: 28px;}
|
||||||
|
.cont5 .list li {width: calc(100%/3 - 12.5px);}
|
||||||
|
.cont5 .list li:hover p {text-decoration: underline;}
|
||||||
|
.cont5 .list li a {display: block;}
|
||||||
|
.cont5 .list li .imgBox {height: 130px; overflow: hidden; background-color: #e5e5e5;}
|
||||||
|
.cont5 .list li .imgBox img {height: 100%;}
|
||||||
|
.cont5 .list li .textBox p {font-size: 18px; font-weight: 300; color: #666; line-height: 1.3; letter-spacing: -0.5px; margin-top: 17px; -webkit-line-clamp: 2; overflow: hidden; display: -webkit-box;}
|
||||||
|
|
||||||
|
@media all and (max-width: 1280px){
|
||||||
|
/* main latout */
|
||||||
|
.main .inner {padding:60px 20px;}
|
||||||
|
.cont1 {width:calc(100% - 450px);}
|
||||||
|
.cont2 {min-width:450px;}
|
||||||
|
.cont3 .cont3_tit {width:200px;background-position:90% center;}
|
||||||
|
.cont3 .cont3_cont {width: calc(100% - 200px);}
|
||||||
|
.cont3 .cont3_tit p {font-size:19px;}
|
||||||
|
.cont3 .cont3_cont>div {background-position:15px center;}
|
||||||
|
.cont3 .cont3_cont>div p {font-size:16px;}
|
||||||
|
.cont3 .cont3_cont>div p a {padding:0 15px 0 80px;}
|
||||||
|
.cont3 .cont3_cont>div p span {left:80px;bottom:20px;font-size:16px;}
|
||||||
|
/*.cont3 .cont3_cont .cont3_cont_3 p a,
|
||||||
|
.cont3 .cont3_cont .cont3_cont_4 p a {padding-top:20px;}*/
|
||||||
|
}
|
||||||
|
|
||||||
|
@media all and (max-width: 1024px){
|
||||||
|
/* main latout */
|
||||||
|
.cont1 {width:100%;}
|
||||||
|
|
||||||
|
.cont2 {width:100%;max-width:100%;min-width:auto;}
|
||||||
|
.cont2 .cont2-swiper .swiper-slide img {display:none;width:100%;}
|
||||||
|
.cont2 .cont2-swiper .swiper-slide .mobile_banner {display:block;}
|
||||||
|
|
||||||
|
.cont3 {display:block;}
|
||||||
|
.cont3 .cont3_tit {width:100%;padding:14px 30px 15px;text-align:left;background-position:right 20px center;border-radius:30px 5px 0 0;}
|
||||||
|
.cont3 .cont3_cont {display:block;width:100%;height:auto;border-radius:0 0 30px 5px;}
|
||||||
|
.cont3 .cont3_cont:after {content:'';display:block;clear:both;}
|
||||||
|
.cont3 .cont3_cont>div {float:left;width:50%;height:80px;line-height:40px;background-position:20px center;box-sizing:border-box;}
|
||||||
|
.cont3 .cont3_cont>div:after {height:100%;}
|
||||||
|
.cont3 .cont3_cont>div p {overflow:hidden;}
|
||||||
|
.cont3 .cont3_cont>div p a {height:80px;justify-content:flex-start;align-items:center;flex-direction:row;}
|
||||||
|
.cont3 .cont3_cont>div p span {display:none;}
|
||||||
|
.cont3 .cont3_cont>div p span.mo_text {display:block;float:left;padding:0 4px 0 0;color:#222}
|
||||||
|
.cont3 .cont3_cont>.cont3_cont_1 {border-bottom:1px solid #cbd0da;}
|
||||||
|
.cont3 .cont3_cont>.cont3_cont_1 p {padding:0;}
|
||||||
|
.cont3 .cont3_cont>.cont3_cont_1 span {position:static;left:initial;bottom:initial;}
|
||||||
|
.cont3 .cont3_cont>.cont3_cont_2 {border-bottom:1px solid #cbd0da;}
|
||||||
|
.cont3 .cont3_cont>.cont3_cont_2:after {display:none;}
|
||||||
|
.cont3 .cont3_cont>.cont3_cont_2 p {padding:0;}
|
||||||
|
.cont3 .cont3_cont>.cont3_cont_2 span {position:static;left:initial;bottom:initial;}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 모바일 */
|
||||||
|
@media screen and (max-width: 767px){
|
||||||
|
/* 1207 - 수정 */
|
||||||
|
.main {margin:0;padding:70px 0 0;}
|
||||||
|
/* //1207 - 수정 */
|
||||||
|
.main .inner {padding:0 10px 35px;}
|
||||||
|
.cont1 {width:100%;}
|
||||||
|
.cont1 .cont1-swiper .swiper-slide {height:auto;padding:0 0 45px;background-image:url(../images/main/m_cont1_bg1.png);background-size:contain;}
|
||||||
|
.cont1 .cont1-swiper .swiper-slide .txt1 {font-size:14px;margin:0 0 0 6px;}
|
||||||
|
.cont1 .cont1-swiper .swiper-slide .txt2 {margin:0 0 0 6px;padding:8px 0 6px;font-size:18px;}
|
||||||
|
.cont1 .cont1-swiper .swiper-slide span {margin:0 0 0 6px;font-size:14px;}
|
||||||
|
.cont1 .cont1-swiper .swiper-slide button {width:130px;height:40px;margin:10px 0 0 6px;padding:0 0 0 20px;font-size:14px;background-size:4px auto;background-position:90% center;}
|
||||||
|
.cont1 .cont1-swiper .slide_button {left:6px;bottom:10px;}
|
||||||
|
.cont1 .slide_button .swiper-pagination {margin:0;}
|
||||||
|
.cont1 .slide_button .swiper-pagination .swiper-pagination-bullet {width:7px;height:7px;}
|
||||||
|
.cont1 .slide_button .swiper-pagination .swiper-pagination-bullet:last-child {margin:0;}
|
||||||
|
.cont1 .slideStart {width:30px;height:30px;margin:-11px 0 0;background-size:16px 16px;background-position:center center;}
|
||||||
|
.cont1 .slidePause {width:30px;height:30px;margin:-11px 0 0;background-size:14px 16px;background-position:center center;}
|
||||||
|
|
||||||
|
.cont2 .cont2-swiper .slide_button {height:40px;border-radius:0 0 15px 5px;}
|
||||||
|
.cont2 .cont2-swiper .slide_button .control,
|
||||||
|
.cont2 .cont2-swiper .slide_button .slideStart,
|
||||||
|
.cont2 .cont2-swiper .slide_button .slidePause {margin-top:10px;}
|
||||||
|
|
||||||
|
.cont3 {margin:15px 0 20px;}
|
||||||
|
.cont3 .cont3_tit {padding:9px 20px 10px;background-size:11px;border-radius:20px 5px 0 0;}
|
||||||
|
.cont3 .cont3_tit p {font-size:15px;}
|
||||||
|
.cont3 .cont3_cont {box-shadow:1px 1px 20px 0px rgba(45, 55, 90, 0.15);}
|
||||||
|
.cont3 .cont3_cont>div {display:flex;height:60px;font-size:14px;line-height:20px;align-items:center;background-size:30px;background-position:10px center;}
|
||||||
|
.cont3 .cont3_cont>div p {font-size:14px;}
|
||||||
|
.cont3 .cont3_cont>div p a {height:60px;padding:0 10px 0 50px;}
|
||||||
|
.cont3 .cont3_cont>div p span {font-size:14px;}
|
||||||
|
/* .cont3 .cont3_cont>div:first-child p a,
|
||||||
|
.cont3 .cont3_cont>div:nth-child(2) p a {padding-top:10px;} */
|
||||||
|
|
||||||
|
.cont4 {width:100%;margin:0 0 20px;padding:20px;border-radius:20px 5px 20px 5px;box-shadow:1px 1px 20px 0px rgba(45, 55, 90, 0.15);}
|
||||||
|
.cont4 .main_cont_tit p {font-size:20px;}
|
||||||
|
button.main_more {padding-right:20px;font-size:14px;line-height:20px;background-size:15px;top:20px;right:20px;}
|
||||||
|
.cont4 .list {margin:17px 0 0;}
|
||||||
|
.cont4 .list li {margin-bottom: 6px;}
|
||||||
|
.cont4 .list li a p {width:calc(100% - 80px); font-size:14px;}
|
||||||
|
.cont4 .list li a p .noticeBox {width:45px; padding:10px 0; font-size:14px;}
|
||||||
|
.cont4 .list li a > span {font-size:14px;line-height:24px;}
|
||||||
|
|
||||||
|
.cont5 {width:100%;margin:0;padding:20px;border-radius:20px 5px 20px 5px;box-shadow:1px 1px 20px 0px rgba(45, 55, 90, 0.15);}
|
||||||
|
.cont5 .main_cont_tit p {font-size:20px;}
|
||||||
|
.cont5 .main_cont_tit button {padding-right:20px;font-size:14px;line-height:20px;background-size:15px;}
|
||||||
|
.cont5 .list {overflow:hidden;display:block;margin:17px 0 0;}
|
||||||
|
.cont5 .list li {float:left;width:calc(50% - 18px);}
|
||||||
|
.cont5 .list li:nth-child(2) {float:right;}
|
||||||
|
.cont5 .list li:nth-child(n+3) {display:none;}
|
||||||
|
.cont5 .list li .imgBox {height:auto;}
|
||||||
|
.cont5 .list li .imgBox img {width:100%;height:auto;}
|
||||||
|
.cont5 .list li .textBox p {margin:10px 0 0;font-size:14px;}
|
||||||
|
|
||||||
|
}
|
||||||
@ -1,108 +1,58 @@
|
|||||||
var main;
|
|
||||||
var main2;
|
|
||||||
$(document).ready(function () {
|
$(document).ready(function () {
|
||||||
|
|
||||||
/*var mainSwiper = new Swiper('.cont1-swiper',{
|
//visual slide
|
||||||
|
var visualSlide = new Swiper('.visual_slide', {
|
||||||
spaceBetween: 30,
|
spaceBetween: 30,
|
||||||
loop: true,
|
loop: true,
|
||||||
pagination: {
|
pagination: {
|
||||||
el: ".swiper-pagination",
|
el: ".visual_slide .swiper-pagination",
|
||||||
clickable : true
|
clickable: true
|
||||||
},
|
},
|
||||||
autoplay:{
|
autoplay: {
|
||||||
delay:4000
|
delay: 5000
|
||||||
},
|
|
||||||
a11y: {
|
|
||||||
prevSlideMessage: '이전 슬라이드',
|
|
||||||
nextSlideMessage: '다음 슬라이드',
|
|
||||||
slideLabelMessage: '총 {{slidesLength}}장의 슬라이드 중 {{index}}번 슬라이드 입니다.',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
$(".cont1 .slidePause").click(function(){ // 중지버튼 눌렀을때
|
|
||||||
if($(this).hasClass('slideStart')){
|
|
||||||
mainSwiper.autoplay.start();
|
|
||||||
$(this).removeClass('slideStart').attr('title','슬라이드 일시정지');
|
|
||||||
}else{
|
|
||||||
mainSwiper.autoplay.stop();
|
|
||||||
$(this).addClass('slideStart').attr('title','슬라이드 재생');
|
|
||||||
}
|
|
||||||
});*/
|
|
||||||
|
|
||||||
var mainPopSwiper = new Swiper('.cont2-swiper',{
|
|
||||||
spaceBetween: 30,
|
|
||||||
loop: true,
|
|
||||||
pagination: {
|
|
||||||
el: ".swiper-pagination",
|
|
||||||
type: "fraction"
|
|
||||||
},
|
|
||||||
autoplay:{
|
|
||||||
delay:4000
|
|
||||||
},
|
},
|
||||||
navigation: {
|
navigation: {
|
||||||
nextEl: ".swiper-button-next",
|
nextEl: '.visual_slide .btn_next_slide',
|
||||||
prevEl: ".swiper-button-prev",
|
prevEl: '.visual_slide .btn_prev_slide',
|
||||||
},
|
}
|
||||||
a11y: {
|
|
||||||
prevSlideMessage: '이전 슬라이드',
|
|
||||||
nextSlideMessage: '다음 슬라이드',
|
|
||||||
slideLabelMessage: '총 {{slidesLength}}장의 슬라이드 중 {{index}}번 슬라이드 입니다.',
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
|
||||||
$(".cont2 .slidePause").click(function(){ // 중지버튼 눌렀을때
|
// notify slide
|
||||||
if($(this).hasClass('slideStart')){
|
var notifySlide = new Swiper('.notify_slide', {
|
||||||
mainPopSwiper.autoplay.start();
|
spaceBetween: 30,
|
||||||
$(this).removeClass('slideStart').attr('title','슬라이드 일시정지');
|
loop: true,
|
||||||
}else{
|
pagination: {
|
||||||
mainPopSwiper.autoplay.stop();
|
el: ".notify_control .slide_number",
|
||||||
$(this).addClass('slideStart').attr('title','슬라이드 재생');
|
type: "fraction"
|
||||||
}
|
},
|
||||||
});
|
autoplay: {
|
||||||
|
delay: 5000
|
||||||
|
},
|
||||||
|
navigation: {
|
||||||
|
nextEl: ".notify_control .swiper-button-next",
|
||||||
|
prevEl: ".notify_control .swiper-button-prev",
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
//웹접근성 - tabIndex 추가.
|
|
||||||
$(".swiper-slide-active").children("button").attr("tabIndex", "0")
|
|
||||||
$(".swiper-slide-active").siblings().children("button").attr("tabIndex", "-1");
|
|
||||||
|
|
||||||
// 웹접근성 - 포커스 시 자동 멈춤
|
$(".visual_slide .slide_pause").click(function () { // 중지버튼 눌렀을때
|
||||||
$(".cont1-swiper .swiper-wrapper button").on("focusin", function () {
|
if ($(this).hasClass('slide_play')) {
|
||||||
mainSwiper.autoplay.stop();
|
$(this).removeClass('slide_play').attr('title', '슬라이드 일시정지').addClass("slide_pause");
|
||||||
$('.cont1-swiper .slidePause').addClass('slideStart').attr('title','슬라이드 일시정지');
|
visualSlide.autoplay.start();
|
||||||
});
|
} else {
|
||||||
|
$(this).removeClass('slide_pause').attr('title', '슬라이드 재생').addClass("slide_play");
|
||||||
|
visualSlide.autoplay.stop();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
// 웹접근성 - 포커스아웃 시 자동
|
$(".notify .slide_pause").click(function () { // 중지버튼 눌렀을때
|
||||||
$(".cont1-swiper .swiper-wrapper button").on("focusout", function () {
|
if ($(this).hasClass('slide_play')) {
|
||||||
mainSwiper.autoplay.start();
|
$(this).removeClass('slide_play').attr('title', '슬라이드 일시정지').addClass("slide_pause");
|
||||||
$('.cont1-swiper .slidePause').removeClass('slideStart').attr('title','슬라이드 재생');
|
notifySlide.autoplay.start();
|
||||||
});
|
} else {
|
||||||
|
$(this).removeClass('slide_pause').attr('title', '슬라이드 재생').addClass("slide_play");
|
||||||
|
notifySlide.autoplay.stop();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
// 웹접근성 - 포커스 시 자동 멈춤
|
})
|
||||||
/*$(".cont2-swiper").on("focusin", function () {
|
|
||||||
mainPopSwiper.autoplay.stop();
|
|
||||||
$('.cont2-swiper .slidePause').addClass('slideStart').attr('title','슬라이드 재생');
|
|
||||||
});
|
|
||||||
|
|
||||||
// 웹접근성 - 포커스아웃 시 자동
|
|
||||||
$(".cont2-swiper").on("focusout", function () {
|
|
||||||
mainPopSwiper.autoplay.start();
|
|
||||||
$('.cont2-swiper .slidePause').removeClass('slideStart').attr('title','슬라이드 일시정지');
|
|
||||||
});
|
|
||||||
*/
|
|
||||||
/*mainSwiper.on("slideChangeTransitionEnd", function () {
|
|
||||||
$(".swiper-slide-active").children("button").attr("tabIndex", "0")
|
|
||||||
$(".swiper-slide-active").siblings().children("button").attr("tabIndex", "-1");
|
|
||||||
}); */
|
|
||||||
|
|
||||||
mainPopSwiper.on("slideChangeTransitionEnd", function () {
|
|
||||||
$(".swiper-slide-active").children("button").attr("tabIndex", "0")
|
|
||||||
$(".swiper-slide-active").siblings().children("button").attr("tabIndex", "-1");
|
|
||||||
});
|
|
||||||
|
|
||||||
})
|
|
||||||
|
|
||||||
//main visual control button 클릭시 active 추가
|
|
||||||
function slideNum(num,item){
|
|
||||||
main.goToSlide(num);
|
|
||||||
$(item).parent("li").addClass("active");
|
|
||||||
$(item).parent("li").siblings("li").removeClass("active")
|
|
||||||
}
|
|
||||||
108
src/main/webapp/visitEdu/usr/publish/script/main_bak_231011.js
Normal file
108
src/main/webapp/visitEdu/usr/publish/script/main_bak_231011.js
Normal file
@ -0,0 +1,108 @@
|
|||||||
|
var main;
|
||||||
|
var main2;
|
||||||
|
$(document).ready(function () {
|
||||||
|
|
||||||
|
/*var mainSwiper = new Swiper('.cont1-swiper',{
|
||||||
|
spaceBetween: 30,
|
||||||
|
loop: true,
|
||||||
|
pagination: {
|
||||||
|
el: ".swiper-pagination",
|
||||||
|
clickable : true
|
||||||
|
},
|
||||||
|
autoplay:{
|
||||||
|
delay:4000
|
||||||
|
},
|
||||||
|
a11y: {
|
||||||
|
prevSlideMessage: '이전 슬라이드',
|
||||||
|
nextSlideMessage: '다음 슬라이드',
|
||||||
|
slideLabelMessage: '총 {{slidesLength}}장의 슬라이드 중 {{index}}번 슬라이드 입니다.',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
$(".cont1 .slidePause").click(function(){ // 중지버튼 눌렀을때
|
||||||
|
if($(this).hasClass('slideStart')){
|
||||||
|
mainSwiper.autoplay.start();
|
||||||
|
$(this).removeClass('slideStart').attr('title','슬라이드 일시정지');
|
||||||
|
}else{
|
||||||
|
mainSwiper.autoplay.stop();
|
||||||
|
$(this).addClass('slideStart').attr('title','슬라이드 재생');
|
||||||
|
}
|
||||||
|
});*/
|
||||||
|
|
||||||
|
var mainPopSwiper = new Swiper('.cont2-swiper',{
|
||||||
|
spaceBetween: 30,
|
||||||
|
loop: true,
|
||||||
|
pagination: {
|
||||||
|
el: ".swiper-pagination",
|
||||||
|
type: "fraction"
|
||||||
|
},
|
||||||
|
autoplay:{
|
||||||
|
delay:4000
|
||||||
|
},
|
||||||
|
navigation: {
|
||||||
|
nextEl: ".swiper-button-next",
|
||||||
|
prevEl: ".swiper-button-prev",
|
||||||
|
},
|
||||||
|
a11y: {
|
||||||
|
prevSlideMessage: '이전 슬라이드',
|
||||||
|
nextSlideMessage: '다음 슬라이드',
|
||||||
|
slideLabelMessage: '총 {{slidesLength}}장의 슬라이드 중 {{index}}번 슬라이드 입니다.',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
$(".cont2 .slidePause").click(function(){ // 중지버튼 눌렀을때
|
||||||
|
if($(this).hasClass('slideStart')){
|
||||||
|
mainPopSwiper.autoplay.start();
|
||||||
|
$(this).removeClass('slideStart').attr('title','슬라이드 일시정지');
|
||||||
|
}else{
|
||||||
|
mainPopSwiper.autoplay.stop();
|
||||||
|
$(this).addClass('slideStart').attr('title','슬라이드 재생');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
//웹접근성 - tabIndex 추가.
|
||||||
|
$(".swiper-slide-active").children("button").attr("tabIndex", "0")
|
||||||
|
$(".swiper-slide-active").siblings().children("button").attr("tabIndex", "-1");
|
||||||
|
|
||||||
|
// 웹접근성 - 포커스 시 자동 멈춤
|
||||||
|
$(".cont1-swiper .swiper-wrapper button").on("focusin", function () {
|
||||||
|
mainSwiper.autoplay.stop();
|
||||||
|
$('.cont1-swiper .slidePause').addClass('slideStart').attr('title','슬라이드 일시정지');
|
||||||
|
});
|
||||||
|
|
||||||
|
// 웹접근성 - 포커스아웃 시 자동
|
||||||
|
$(".cont1-swiper .swiper-wrapper button").on("focusout", function () {
|
||||||
|
mainSwiper.autoplay.start();
|
||||||
|
$('.cont1-swiper .slidePause').removeClass('slideStart').attr('title','슬라이드 재생');
|
||||||
|
});
|
||||||
|
|
||||||
|
// 웹접근성 - 포커스 시 자동 멈춤
|
||||||
|
/*$(".cont2-swiper").on("focusin", function () {
|
||||||
|
mainPopSwiper.autoplay.stop();
|
||||||
|
$('.cont2-swiper .slidePause').addClass('slideStart').attr('title','슬라이드 재생');
|
||||||
|
});
|
||||||
|
|
||||||
|
// 웹접근성 - 포커스아웃 시 자동
|
||||||
|
$(".cont2-swiper").on("focusout", function () {
|
||||||
|
mainPopSwiper.autoplay.start();
|
||||||
|
$('.cont2-swiper .slidePause').removeClass('slideStart').attr('title','슬라이드 일시정지');
|
||||||
|
});
|
||||||
|
*/
|
||||||
|
/*mainSwiper.on("slideChangeTransitionEnd", function () {
|
||||||
|
$(".swiper-slide-active").children("button").attr("tabIndex", "0")
|
||||||
|
$(".swiper-slide-active").siblings().children("button").attr("tabIndex", "-1");
|
||||||
|
}); */
|
||||||
|
|
||||||
|
mainPopSwiper.on("slideChangeTransitionEnd", function () {
|
||||||
|
$(".swiper-slide-active").children("button").attr("tabIndex", "0")
|
||||||
|
$(".swiper-slide-active").siblings().children("button").attr("tabIndex", "-1");
|
||||||
|
});
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
//main visual control button 클릭시 active 추가
|
||||||
|
function slideNum(num,item){
|
||||||
|
main.goToSlide(num);
|
||||||
|
$(item).parent("li").addClass("active");
|
||||||
|
$(item).parent("li").siblings("li").removeClass("active")
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user