접근성수정

src/main/webapp/WEB-INF/jsp/nlib/collection/searchItemDetail.jsp

@@ -428,7 +428,13 @@ function goList(){
                             </div>
                             <div class="swiper-button-next"></div>
                             <div class="swiper-button-prev"></div>
+                            <div id="detail1BannerPage" class="pagination">
 								<div class="swiper-pagination"></div>
+								<div class="loop-count">
+									<canvas id="swieper-timer" width="32" height="32"></canvas>
+									<button class="remote remote-detail1"><span></span></button>
+								</div>
+							</div>
                         </div>
                         <!-- Swiper end -->
                     </div>
@@ -470,7 +476,13 @@ function goList(){
                             </div>
                             <div class="swiper-button-next"></div>
                             <div class="swiper-button-prev"></div>
+                            <div id="detail2BannerPage" class="pagination">
 								<div class="swiper-pagination"></div>
+								<div class="loop-count">
+									<canvas id="swieper-timer" width="32" height="32"></canvas>
+									<button class="remote remote-detail2"><span></span></button>
+								</div>
+							</div>
                         </div>
                         <!-- Swiper end -->
                     </div>
@@ -525,7 +537,7 @@ function goList(){
   }
   
   /* 함께 볼만한자료 슬라이드 */
-  var swiper = new Swiper('.DetailSwiper1', {
+  var detailswiper1 = new Swiper('.DetailSwiper1', {
      loop: false,
       slidesPerView: _slidesPerView,
       spaceBetween: 30,
@@ -538,12 +550,10 @@ function goList(){
           nextEl: ".swiper-button-next",
           prevEl: ".swiper-button-prev",
       },
-      /*
       pagination: {
-          el: ".swiper-pagination",
+          el: '.pagination .swiper-pagination',
-          clickable: true,
+          type: 'fraction',
        },
-      */
       on: {
           init: function () {
               if (this.slides.length <= _lenght) {
@@ -551,6 +561,7 @@ function goList(){
                   this.allowSlidePrev = this.allowSlideNext = false; // disabling swiping
                   this.el.querySelector(".swiper-button-prev").style.visibility = "hidden";  // hiding arrows prev&next
                   this.el.querySelector(".swiper-button-next").style.visibility = "hidden";
+                  this.el.querySelector(".pagination").style.visibility = "hidden";
               }
           }
       }
@@ -569,8 +580,8 @@ function goList(){
   }
   
   /* 유사한 자료 슬라이드 */
- var swiper = new Swiper('.DetailSwiper2', {
+ var detailswiper2 = new Swiper('.DetailSwiper2', {
-    loop: true,
+    loop: false,
      slidesPerView: _slidesPerViewBottom,
      spaceBetween: _spaceBetween,
      centeredSlides: true,
@@ -582,12 +593,10 @@ function goList(){
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
      },
-     /*
      pagination: {
-         el: ".swiper-pagination",
+         el: '.pagination .swiper-pagination',
-         clickable: true,
+         type: 'fraction',
       },
-     */
      on: {
          init: function () {
              if (this.slides.length <= _lenght) {
@@ -595,9 +604,29 @@ function goList(){
                  this.allowSlidePrev = this.allowSlideNext = false; // disabling swiping
                  this.el.querySelector(".swiper-button-prev").style.visibility = "hidden";  // hiding arrows prev&next
                  this.el.querySelector(".swiper-button-next").style.visibility = "hidden";
+                 this.el.querySelector(".pagination").style.visibility = "hidden";
              }
          }
      }
  });
  
+  
+ $('.remote-detail1').click(function () {
+	  if($(this).hasClass('restart')){
+	     $(this).removeClass('restart');
+	     detailswiper1.autoplay.start();
+	  }else{
+	     $(this).addClass('restart');
+	     detailswiper1.autoplay.stop();
+	  }
+	});
+  $('.remote-detail2').click(function () {
+	  if($(this).hasClass('restart')){
+	     $(this).removeClass('restart');
+	     detailswiper2.autoplay.start();
+	  }else{
+	     $(this).addClass('restart');
+	     detailswiper2.autoplay.stop();
+	  }
+	});
 </script>

src/main/webapp/WEB-INF/tiles/tiles-layout.jsp

@@ -50,6 +50,7 @@ function fn_setPageTitle(title) {
 	
 </head>
 <body>
+<div id="skipNav"><a href="#contents">본문 바로가기</a></div>
 
 <!-- <div class="wrap sub"> sub는 서브페이지 -->
 <div id="DIV_PAGE_MAIN" class="wrap sub">
@@ -65,7 +66,9 @@ function fn_setPageTitle(title) {
     </div>
     
     <!-- 메인컨텐츠 -->
+    <div id="contents">
     <tiles:insertAttribute name="main" />
+	</div>
 	
     <!-- 풋터 -->    
     <footer id="footer">

src/main/webapp/css/default.css

@@ -30,6 +30,9 @@
 .wrap header .inner .log ul li a span {color:#f0a233;}
 .wrap header .inner .log ul li:first-child a {border:0;}
 .wrap header .inner .log ul li:last-child a {padding-right:0;}
+#skipNav{position:relative;z-index:9999;}
+#skipNav a{position: absolute; top: -200px; left:0; width: 100%; line-height: 30px; border: 1px solid #dedede; background-color: #333;color:#fff;text-align:center;} 
+#skipNav a:focus, #skipNav a:active{top: 0;}
 
 
 /********** 메뉴 **********/
@@ -983,7 +986,7 @@ transform: rotate(45deg);}
 .data.detail .inner .row-bottom .con-3 .top {padding:10px 0px;position: relative;border-bottom:1px solid #ddd;}
 .data.detail .inner .row-bottom .con-3 .top h3 {font-size:24px;text-align: center;} 
 .data.detail .inner .row-bottom .con-3 .top h3 span {color: #376795;}
-.data.detail .inner .row-bottom .DetailSwiper1 {display: inline-block;width:100%;}
+.data.detail .inner .row-bottom .DetailSwiper1 {display: inline-block;width:100%;padding:1% 0% 4%;}
 .data.detail .inner .row-bottom .DetailSwiper1 .swiper-wrapper {margin-top:15px;}
 .data.detail .inner .row-bottom .DetailSwiper1 .swiper-slide .List {border:1px solid #ddd;padding:30px;text-align:left;}
 .data.detail .inner .row-bottom .DetailSwiper1 .swiper-slide .List .con-1 {border:0px;border-bottom:1px solid #e6e6e6;padding-bottom: 15px;margin-bottom:15px;overflow: hidden;width:100%;display: inline-block;margin-top:0;}
@@ -993,6 +996,14 @@ transform: rotate(45deg);}
 .data.detail .inner .row-bottom .DetailSwiper1 .swiper-slide .List .con-2 {width:100%;border:0px;margin:0;}
 .data.detail .inner .row-bottom .DetailSwiper1 .swiper-slide .List .con-2 p {font-size:14px;color:#777;margin-bottom: 5px;}
 .data.detail .inner .row-bottom .DetailSwiper1 .swiper-slide .List .con-2 p span:nth-of-type(1) {display:inline-block;font-weight:500;padding-right:10px;margin-right:10px;border-right:1px solid #ddd;height:10px;line-height:9px;}
+.data.detail .inner .row-bottom .DetailSwiper1 .loop-count {display: inline-block;position:relative;top:50%;width:36px;height:36px;padding:2px;vertical-align: middle;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
+.data.detail .inner .row-bottom .DetailSwiper1 .loop-count button.remote-detail1 {background:none !important;position:absolute;left:0;right:0;top:0;bottom:0;width:20px;height:20px;margin:auto;border:2px solid #333;border-radius:50%;z-index:1;background-size:34px 34px;}
+.data.detail .inner .row-bottom .DetailSwiper1 .loop-count button.remote-detail1 span {display:block;width:100%;height:100%;background:transparent url('/images/btn/btn-mainvisual-stop-black.png') no-repeat 50% 50%;}
+.data.detail .inner .row-bottom .DetailSwiper1 .loop-count button.remote-detail1 {outline:none;}
+.data.detail .inner .row-bottom .DetailSwiper1 .loop-count button.remote-detail1.restart span {background-image:url('/images/btn/btn-mainvisual-play-black.png');}
+.data.detail .inner .row-bottom .DetailSwiper1 .pagination {position:absolute;bottom:0px;left:calc(50% - 0px);}
+.data.detail .inner .row-bottom .DetailSwiper1 .swiper-pagination-fraction {color:#333;left:-40px;top:4px;}
+
 .data.detail .inner .row-bottom .con-4 {background: #f5f5f5;padding:0px 0px 60px;margin:0px 0px 100px;}
 .data.detail .inner .row-bottom .con-4 .top {padding:40px 0px;position: relative;text-align: center;}
 .data.detail .inner .row-bottom .con-4 .top h3 {font-size:24px;width:1400px;margin:0 auto;position: relative;z-index: 9;}
@@ -1000,7 +1011,7 @@ transform: rotate(45deg);}
 .data.detail .inner .row-bottom .con-4 .top h3::before {content: '';width:1400px;height:1px;position: absolute;top:20px;left:0px;background:#c1c1c1;z-index: -1}
 .data.detail .inner .row-bottom .con-4 .top h3::after {content: '';width:300px;height:35px;position: absolute;top:0px;left:calc(50% - 150px);background:#f5f5f5;z-index: -1}
 .data.detail .inner .row-bottom .con-4 .top p {font-size:14px;color:#666;}
-.data.detail .inner .row-bottom .DetailSwiper2 {max-width:1400px;}
+.data.detail .inner .row-bottom .DetailSwiper2 {max-width:1400px;padding:1% 0% 4%;}
 /*
 .data.detail .inner .row-bottom .DetailSwiper2::before {content: '';width:13.5%;height:120%;background: #f5f5f5;display: inline-block;position: absolute;left:0px;top:-10%;z-index: 9;}
 .data.detail .inner .row-bottom .DetailSwiper2::after {content: '';width:13.5%;height:120%;background: #f5f5f5;display: inline-block;position: absolute;right:0px;top:-10%;z-index: 9;}
@@ -1042,6 +1053,14 @@ transform: rotate(45deg);}
 .data.detail .inner .row-bottom .DetailSwiper2 .items .List .inner div.thumbnail div.detail-cover .btn-box .RIS a {background: #666;color:#fff;display: block;border-radius: 3px;padding:8px 0px;font-size: 14px;}
 .data.detail .inner .row-bottom .DetailSwiper2 .swiper-button-next, .data.detail .inner .row-bottom .DetailSwiper2 .swiper-rtl .swiper-button-prev {right:30px;}
 .data.detail .inner .row-bottom .DetailSwiper2 .swiper-button-prev, .data.detail .inner .row-bottom .DetailSwiper2 .swiper-rtl .swiper-button-next {left:30px;}
+.data.detail .inner .row-bottom .DetailSwiper2 .loop-count {display: inline-block;position:relative;top:50%;width:36px;height:36px;padding:2px;vertical-align: middle;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
+.data.detail .inner .row-bottom .DetailSwiper2 .loop-count button.remote-detail2 {background:none !important;position:absolute;left:0;right:0;top:0;bottom:0;width:20px;height:20px;margin:auto;border:2px solid #333;border-radius:50%;z-index:1;background-size:34px 34px;}
+.data.detail .inner .row-bottom .DetailSwiper2 .loop-count button.remote-detail2 span {display:block;width:100%;height:100%;background:transparent url('/images/btn/btn-mainvisual-stop-black.png') no-repeat 50% 50%;}
+.data.detail .inner .row-bottom .DetailSwiper2 .loop-count button.remote-detail2 {outline:none;}
+.data.detail .inner .row-bottom .DetailSwiper2 .loop-count button.remote-detail2.restart span {background-image:url('/images/btn/btn-mainvisual-play-black.png');}
+.data.detail .inner .row-bottom .DetailSwiper2 .pagination {position:absolute;bottom:0px;left:calc(50% - 0px);}
+.data.detail .inner .row-bottom .DetailSwiper2 .swiper-pagination-fraction {color:#333;left:-40px;top:4px;}
+
 .data.detail .btn-box {margin:50px 0px;text-align: center;}
 .data.detail .inner .row-bottom .DetailSwiper1 .swiper-button-next,
 .data.detail .inner .row-bottom .DetailSwiper1 .swiper-button-prev {top:30px;}

src/main/webapp/css/media.css

@@ -124,11 +124,15 @@ a.pop-logo img { margin-right: 10px; }
 .sec2 {padding:0% 2% 100px;}
 .sec2 .keyword-box {width:100%;}
 .sec3 {padding:100px 2% 100px;}
+.sec3 .pickSwiper {padding:1% 10% 12%;}
 .sec3 .pickSwiper .swiper-slide .list-box .images a img {}
 .sec5 {padding:100px 2% 100px;}
+.sec5 .popularSwiper {padding:1% 0% 12%;}
+.sec5 .popularSwiper .swiper-pagination-fraction {top:28px;}
 .sec5 .inner .tab_content {width:96%;padding:30px 1.9%;}
 .sec5 .inner {width:100%;}
 .sec6 {padding:100px 2% 100px;}
+.sec6 .onlineSwiper {padding:1% 0% 12%;}
 .sec6 .inner .more-btn {right: 0%;}
 .sec6 .onlineSwiper .swiper-slide {background:none;box-shadow:0 0 0;}
 .sec6 .onlineSwiper::before {width:7%;box-shadow:0 0 0;}

src/main/webapp/js/default.js

@@ -509,7 +509,19 @@ $(document).ready(function(){
     $('.wrap .nav-wrap #primary-nav ul li a').focus(function(){
     	$('.wrap .nav-wrap #primary-nav ul li .sub-menu').show();
     });
-    $('.mo-nav-wrap .login_box .btns_box button.btn_login').focus(function(){
+    $('.sec1 .inner .banner p:nth-of-type(2) a').focus(function(){
+    	$('.wrap .nav-wrap #primary-nav ul li .sub-menu').hide();
+    });
+    $('footer .row-top a').focus(function(){
+    	$('.wrap .nav-wrap #primary-nav ul li .sub-menu').hide();
+    });
+    $('.filter-head .btn-filter-reset').focus(function(){
+    	$('.wrap .nav-wrap #primary-nav ul li .sub-menu').hide();
+    });
+    $('select, input, button').focus(function(){
+    	$('.wrap .nav-wrap #primary-nav ul li .sub-menu').hide();
+    });
+    $('.myinfo .inner .row-bottom .myinfo-box .top-info .left .myinfo-btn a').focus(function(){
     	$('.wrap .nav-wrap #primary-nav ul li .sub-menu').hide();
     });