24/12/03 메인페이지 수정

src/main/webapp/WEB-INF/jsp/_extra/web/user/exam/examList.jsp

@@ -178,11 +178,11 @@
 	<div class="table_type_cols">
 		<table>
 			<colgroup>
-				<col style="width:68px;">
+				<col style="width:60px;">
-				<col style="width:auto;">
-				<col style="width:auto;">
-				<col style="width:auto;">
 				<col style="width:auto;">
+				<col style="width:40%;">
+				<col style="width:17%;">
+				<col style="width:100px;">
 			</colgroup>
 			<thead>
 				<tr>

src/main/webapp/WEB-INF/jsp/_extra/web/user/mediation/mediationStep04_1.jsp

@@ -18,7 +18,8 @@
 	});
 	
 	function addTabC(){
-		$('.btnAddTabC').on('click',function(){		
+		$('.btnAddTabC').on('click',function(){	
+			tableRowCaption();
 			/* var areaCount = $('.subTab_c').length + 1;
 
 	        if(areaCount > 5) {

src/main/webapp/WEB-INF/jsp/_extra/web/user/myPage/mediationPop.jsp

@@ -48,12 +48,12 @@
 
 
 <form id="mediationForm" name="mediationForm" action="/web/user/cert/nCertStep2.do" method="post">
-	<div class="window_popup idf" style="width:700px">
+	<div class="window_popup case_popup idf" style="width:700px">
 		<div class="title_area">
 			<h1>사건 조회</h1>
 		</div>
 		<div class="box gray_fill">
-			<ul class="input_box column">
+			<ul class="input_box">
 				<li>
 					<p>· 사건번호</p>
 					<input type="text" id="caseNo" name="caseNo" class="input_text" placeholder="사건번호를 입력해주세요." title="사건번호 입력">
@@ -62,10 +62,10 @@
 					<p>· 비밀번호</p>
 					<input type="password" id="checkPass" name="checkPass" class="input_text" placeholder="비밀번호를 입력해주세요." title="비밀번호 입력">
 				</li>
-				<li>
-					<button type="button" class="btn btn_text btn_50 darkblue_fill w100per" onclick="mediationView();">조회</button>
-				</li>
 			</ul>
 		</div>
+		<div class="btn_wrap center">
+			<button type="button" class="btn btn_text btn_46 darkblue_fill" onclick="mediationView();">조회</button>
+		</div>
 	</div>
 </form>

src/main/webapp/WEB-INF/jsp/_extra/web/user/myPage/myMediationList.jsp

@@ -37,7 +37,7 @@
 	}
 	
 	function mediationPop(){
-		window.open('/web/user/mypage/case/01/169/mediationPop.do', 'mediationPop', 'width=710, height=527')
+		window.open('/web/user/mypage/case/01/169/mediationPop.do', 'mediationPop', 'width=710, height=350')
 	}
 	</script>
 	
@@ -78,7 +78,7 @@
                   <col style="width:18%;">
                   <col style="width:15%;">
                   <col style="width:15%;">
-                  <col style="width:15%;">
+                  <col style="width:20%;">
                 </colgroup>
                 <thead>
                   <tr>

src/main/webapp/WEB-INF/jsp/web/com/webCommonFooter.jsp

@@ -17,7 +17,7 @@
 		<div class="footer_content">
 			<div class="footer_info">
 				<p>서울시 중구 세종대로 39 상공회의소회관 9층 한국공정거래조정원</p>
-				<p><b class="gMarket_bold">TEL : 1588-1490</b>(유료, 통화료 발신자 부담)</p>
+				<p><b class="gMarket_bold">TEL : 1588-1490</b> (유료, 통화료 발신자 부담)</p>
 				<p><b class="gMarket_bold">FAX : 02-6363-9119</b></p>
 			</div>
 			<div class="footer_site">

src/main/webapp/kofair_case_seed/usr/scripts/index.js

@@ -79,10 +79,14 @@ $(function () {
 
 
 
-  var swiper = new Swiper(".case_list", {
+  var caseSwiper = new Swiper(".case_list", {
     slidesPerView: 4,
     spaceBetween: 25,
     loop: false,
+    autoplay: {
+        delay: 2500,
+        disableOnInteraction: false,
+    },
     navigation: {
       nextEl: ".case_content .btn_next",
       prevEl: ".case_content .btn_prev",
@@ -99,10 +103,14 @@ $(function () {
     },
   });
 
-  var swiper = new Swiper(".banner_slide", {
+  var bannerSwiper = new Swiper(".banner_slide", {
     slidesPerView: 6,
     spaceBetween: 25,
     loop: true,
+    autoplay: {
+        delay: 2500,
+        disableOnInteraction: false,
+    },
     navigation: {
       nextEl: ".banner_contents .btn_next",
       prevEl: ".banner_contents .btn_prev",
@@ -118,6 +126,28 @@ $(function () {
       }
     }
   });
+  
+  $(".btn_pause").click(function(){
+	  if($(this).closest(".case_content").is(".case_content")){
+		  caseSwiper.autoplay.pause();
+	  }else if($(this).closest(".banner_contents").is(".banner_contents")){
+		  bannerSwiper.autoplay.pause();
+	  }
+	  
+	  $(this).addClass("hide");
+	  $(this).siblings(".btn_play").removeClass("hide");
+  });
+  
+  $(".btn_play").click(function(){
+	  if($(this).closest(".case_content").is(".case_content")){
+		  caseSwiper.autoplay.start();
+	  }else if($(this).closest(".banner_contents").is(".banner_contents")){
+		  bannerSwiper.autoplay.start();
+	  }
+	  
+	  $(this).addClass("hide");
+	  $(this).siblings(".btn_pause").removeClass("hide");
+  });
 
   $(".notice_content .tab").click(function () {
     $(this).addClass("active");

src/main/webapp/kofair_case_seed/usr/scripts/ui.js

@@ -5,4 +5,68 @@ var pblEvt = {
 		$(obj).closest(prt).siblings(".tab_contents").eq(num).show();
 		$(obj).closest(prt).siblings(".tab_contents").eq(num).siblings(".tab_contents").hide();
 	}
+}
+
+$(function(){
+	tableColCaption();
+	tableRowCaption();
+})
+
+function tableColCaption(){
+	var bdWid = $("body").width();
+	var itmText = "";
+	
+	$(".table_type_cols").each(function(idx,table){
+		var thLength = $(table).find("thead>tr>th").length;
+		$(table).find("thead>tr>th").each(function(index,th){
+			itmText += $(th).text();
+			if(index === thLength - 1){
+				// 마지막 th일 경우 ,가 들어가면 안됨
+			}else{
+				itmText += ", ";
+			}
+		});
+		
+		if($(table).find("caption").length == 0){
+			$(table).find(">table").prepend("<caption>" + itmText + "등의 정보제공</caption>");
+		}else{
+			$(table).find("caption").text(itmText + "등의 정보제공");
+		}
+		
+	});
+	
+}
+
+function tableRowCaption(){
+	var bdWid = $("body").width();
+	
+	$(".table_type_rows").each(function(idx,table){
+		var itmText = "";
+		var thLength = $(table).find("tbody>tr>th").length;
+		$(table).find("tbody>tr>th").each(function(index,th){
+			itmText += $(th).text();
+			if(index === thLength - 1){
+				// 마지막 th일 경우 ,가 들어가면 안됨
+			}else{
+				itmText += ", ";
+			}
+			
+			if($(table).find("select,input,textarea").length>0){
+				// 입력창 있을 경우
+				if($(table).find("caption").length == 0){
+					$(table).find(">table").prepend("<caption>" + itmText + "등의 정보입력 및 선택</caption>");
+				}else{
+					$(table).find("caption").text(itmText + "등의 정보입력 및 선택");
+				}
+			}else{
+				if($(table).find("caption").length == 0){
+					$(table).find(">table").prepend("<caption>" + itmText + "등의 정보제공</caption>");
+				}else{
+					$(table).find("caption").text(itmText + "등의 정보제공");
+				}
+			}
+		});
+		
+	});
+	
 }

src/main/webapp/kofair_case_seed/usr/style/index.css

@@ -70,7 +70,8 @@
 .baro_content .baro_link.darkblue_box:hover{background:#1f309f;}
 .baro_content .baro_link.blue_box:hover{background:#1e64dc;}
 .baro_title{position:relative;display:block;font-size:2.7rem;font-weight:bold;color:#2e40ba;padding:0 0 30px 0;margin:0 0 25px 0;}
-.baro_title::after{position:absolute;content:"";width:34px;height:4px;background:#bed4fb;left:0;bottom:0;}
+.baro_title::after{position:absolute;content:"";width:34px;height:4px;background:#6b75c9;left:0;bottom:0;}
+.baro_content .darkblue_box .baro_title::after,.baro_content .blue_box .baro_title::after{background:#bfd4fa;}
 .darkblue_box .baro_title, .blue_box .baro_title{color:#fff;}
 .baro_text{font-size:1.8rem;font-weight:400;color:#6b75c9;}
 .darkblue_box .baro_text{color:#bfd4fa;}
@@ -88,7 +89,7 @@
 /* 분쟁조정 사례 */
 
 .case_content{padding:60px 0;text-align:center;}
-.case_content .title_wrap{position:relative;margin:0 0 35px 0;}
+.case_content .title_wrap{position:relative;margin:0 0 30px 0;}
 .case_content .title{font-size:3.2rem;font-weight:bold;color:#333;}
 .case_content .title .btn_plus{width:40px;height:40px;vertical-align:middle;margin:-5px 0 0 16px;}
 .case_content .case_slide_util{position:absolute;right:0;top:4px;}
@@ -124,8 +125,8 @@
 .notice_content .tab.active{color:#333;text-decoration:underline;text-underline-offset:10px;text-decoration-thickness:5px;}
 .notice_content .tab_content{display:none;height:206px;margin:44px 0 0 0;}
 .notice_content .tab_content.active{display:block;width:100%;}
-.notice_content .tab_content .btn_plus{position:absolute;left:387px;top:16px;background:#fff;}
+.notice_content .tab_content .btn_plus{position:absolute;left:386px;top:12px;background:#fff;}
-.notice_content .tab_content .btn_plus i{margin:-2px -0.9px 0 0;}
+.notice_content .tab_content .btn_plus i{margin:-5px -1px 0 0;}
 .notice_content .faq{order: 2;}
 .notice_content a{position:relative;display:flex;padding:0 0 12px 12px;font-size:2.1rem;color:#333;width:100%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;justify-content:space-between;}
 .notice_content .faq a{display:block;}
@@ -145,10 +146,9 @@
 .news_content a{position:relative;display:inline-block;padding:0 20px 12px 12px;font-size:2.1rem;color:#333;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}
 .news_content a.new::before{position:absolute;content:"N";font-size:1.6rem;font-weight:900;color:#f96502;right:0;top:3px;}
 .news_content a::after{position:absolute;content:"";width:4px;height:4px;background:#b4b4b4;left:0;top:12.5px;}
-.news_content .btn_wrap{margin:10px 0 0 0;}
+.news_content .btn_wrap{margin:10px 0 0 0;gap:5px}
-.news_content .btn_wrap button{width:calc((100% / 2) - 5px);}
+.news_content .btn_wrap button{width:50%;}
-.news_content .btn_wrap button:first-child{margin:0 3px 0 0;}
+
-.news_content .btn_wrap button:last-child{margin:0 0 0 3px;}
 /* //뉴스레터 */
 
 /* 콜센터 */
@@ -182,10 +182,16 @@
   .baro_text br{display:none;}
   .baro_content .baro_link::after{top:auto;bottom:110px;right:35px;}
   /* //바로가기 */
+  
+  /* 분쟁조정 사례 */
+  .case_content .title .btn,.case_content .case_slide_util .btn.only_icon{border-radius:100%;}
+  .case_content .case_slide_util{display:flex;gap:4px;}
+  /* //분쟁조정 사례 */
 
   /* 자주하는 질문 + 공지사항 */
   .notice_content .tab{font-size:3.2rem;}
-  .notice_content .tab_content .btn_plus{left:auto;right:0;}
+  .notice_content .tab_content .btn_plus{min-height:auto;left:auto;right:0;border-radius:100%;padding:0;}
+  .notice_content .tab_content .btn_plus i{margin:0;}
   /* //자주하는 질문 + 공지사항 */
 }
 
@@ -199,6 +205,7 @@
 	
   .main .icon.arrow.left{width:60px;height:60px;background:url(/kofair_case_seed/usr/images/component/icon_arrow_left_60.png) no-repeat center center;margin:0;}
   .main .icon.pause{width:60px;height:60px;background:url(/kofair_case_seed/usr/images/component/icon_pause_60.png) no-repeat center center;margin:0;}
+  .main .icon.play{width:60px;height:60px;background:url(/kofair_case_seed/usr/images/component/icon_play_60.png) no-repeat center center;margin:0;}
   .main .icon.arrow.right,.main .footer .icon.arrow.right{width:60px;height:60px;background:url(/kofair_case_seed/usr/images/component/icon_arrow_right_60.png) no-repeat center center;margin:0;}
   .main .footer .icon.arrow.right{margin:-4px 0 0 0;}
 
@@ -256,12 +263,15 @@
   .banner_contents .banner_slide{width:100%;}
   .banner_contents img{margin:0 auto;}
   .banner_contents .case_slide_util{display:flex;width:100%;order:2;justify-content:center;gap:10px;}
-  .banner_contents .case_slide_util .btn.only_icon{width:60px;height:60px;margin:0;}
+  .banner_contents .case_slide_util .btn.only_icon{width:60px;height:60px;min-height:auto;margin:0;padding:0;border-radius:100%;}
   .banner_contents .btn.only_icon .icon.left,.banner_contents .btn.only_icon .icon.pause,.banner_contents .btn.only_icon .icon.right{margin:0;}
 }
 
 /* ==================== 모바일 ==================== */
 @media screen and (max-width: 767px){
+	
+  .main .icon.pause,.main .icon.arrow.left,.main .icon.arrow.right{margin:-1px 0 0 -1px;}
+  .main .icon.play,.case_content .case_slide_util .btn.only_icon i.icon.play,.banner_content .case_slide_util .btn.only_icon i.icon.play{width:10px;height:14px;background:url(/kofair_case_seed/usr/images/main/icon_slide_play.png) no-repeat center center;margin:-1.5px 0 0 3.5px;}
 
   .popup_area .popup_slide{width:calc(90% - 60px);}
   .popup_area .slick-slide{margin:0 10px;}

src/main/webapp/kofair_case_seed/usr/style/layout.css

@@ -76,7 +76,7 @@ html{font-size:62.5%;}
 /* footer */
 .footer{width:100%;background:#d0d1d3;padding:40px 0 35px 0;font-size:1.7rem;font-weight:400;color:#585858;}
 .footer .logo{display:inline-block;}
-.footer_content{display:flex;margin:40px 0 0 0;align-items:flex-end;justify-content:space-between;}
+.footer_content{display:flex;margin:10px 0 0 0;align-items:flex-end;justify-content:space-between;}
 .footer_info{line-height:1.7;}
 .footer_info p:first-child{margin:0 0 16px 0;}
 .footer_site{display:flex;flex-direction:column;font-weight:500;}
@@ -149,15 +149,15 @@ html{font-size:62.5%;}
   .footer .logo,.footer .footer_content{padding:0 20px;}
   .footer .icon.outlink{width:24px;height:24px;background:url(/kofair_case_seed/usr/images/component/icon_outlink_m.png) no-repeat center top;margin:-10px 0 0 10px;}
   .footer_content{flex-direction:column;align-items:flex-start;}
-  .footer_info{font-size:3.2rem;line-height:1.2;}
+  .footer_info{font-size:3.2rem;line-height:1.4;margin:20px 0 0 0;}
   .footer_site{width:100%;margin:30px 0 0 0;}
   .footer_site a{width:auto;font-size:3.2rem;margin:20px 0 0 0;}
   
   .footer_site .icon.arrow.right{width:35px;height:35px;margin:-5px 0 0 0;background:url(/kofair_case_seed/usr/images/component/icon_arrow_right_m.png) no-repeat center center;}
   .footer_site .site_wrap{width:100%;margin:60px 0 0 -20px;}
   .footer_site .site_wrap select{width:calc(100% - 100px);max-width:360px;height:60px;margin:0 10px 0 0;font-size:2.8rem;background:#fff url(/kofair_case_seed/usr/images/component/icon_select_m.png) no-repeat calc(100% - 22px) center;}
-  .footer_site .site_wrap .gray_fill{width:80px;height:60px;font-size:3.2rem;padding:0;}
+  .footer_site .site_wrap .gray_fill{width:80px;height:60px;min-height:auto;font-size:3.2rem;padding:0;}
-  .footer_bottom{font-size:3.2rem;padding:50px 0 0 0;margin:50px 0 0 0;flex-wrap:wrap;}
+  .footer_bottom{width:calc(100% + 60px);font-size:3.2rem;padding:50px 0 0 30px;margin:50px 0 0 -30px;flex-wrap:wrap;}
   .footer_bottom .link{width:100%;margin:0 0 30px 0;}
   .footer_bottom a{padding:0 36px;}
   .footer_bottom a:first-child{padding:0 36px 0 0;}
@@ -172,7 +172,7 @@ html{font-size:62.5%;}
   .mobile_header{height:63px;padding:0 30px;}
   .mobile_header .logo{width:55%;}
   .mobile_header .header_util{gap:11px;}
-  .mobile_header .header_util button{width:30px;height:20px;height:auto !important;max-height:30px;}
+  .mobile_header .header_util button{width:30px;height:20px !important;max-height:30px;}
   .mobile_header .header_util button i{height:100%;background-size:auto 100%;}
   /* .mobile_header .header_util .btn_menu i{background-size:auto ;} */
   
@@ -184,7 +184,7 @@ html{font-size:62.5%;}
   .mobile_header .all_menu_wrap .btn_menu_close{width:32px;height:32px;}
   .mobile_header .all_menu_wrap .btn_menu_close i{background-size:100% auto;}
   
-  .mobile_header .all_menu_wrap .top_area{height:63px;padding:0 30px;}
+  .mobile_header .all_menu_wrap .top_area{height:63px;padding:0 15px;}
   .m_menu_depth01{height:48.5px;padding:0 16px;font-size:1.8rem;}
   .active .m_menu_depth01{background-size:15px 9px;}
   
@@ -200,7 +200,7 @@ html{font-size:62.5%;}
   .footer .m_logo{width:70%;}
   .footer .logo, .footer .footer_content{padding:0 10px;}
   .footer_content{margin:20px 0 0 0;}
-  .footer_info{font-size:1.6rem;line-height:1.4;}
+  .footer_info{font-size:1.6rem;line-height:1.4;margin:0;}
   .footer_info p:first-child{margin:0 0 8px 0;}
 
   .footer_site{margin:15px 0 0 0;}
@@ -211,7 +211,7 @@ html{font-size:62.5%;}
   .footer_site .site_wrap select,.footer_site .site_wrap .gray_fill{height:40px;font-size: 1.6rem;}
   .footer_site .site_wrap select{background: #fff url(/kofair_case_seed/usr/images/component/icon_select.png) no-repeat calc(100% - 15px) center;}
 
-  .footer_bottom{font-size:1.6rem;padding:25px 0 0 0;margin:25px 0 0 0;}
+  .footer_bottom{font-size:1.6rem;padding:25px 0 0 30px;margin:25px 0 0 -30px;}
   .footer_bottom .link{margin:0 0 15px 0;flex-wrap:wrap;}
   .footer_bottom a{padding:0 18px;}
   .footer_bottom a:first-child{padding:0 18px 0 0;}

src/main/webapp/kofair_case_seed/usr/style/popup.css

@@ -54,10 +54,14 @@
 .idf.window_popup .checkbox_wrap{display:flex;align-items:center;gap:8px;}
 .idf.window_popup input[type="checkbox"]{width:18px;height:18px;}
 .idf.window_popup input[type="checkbox"]+label{font-size:1.7rem;}
-.idf.window_popup .btn_wrap button{width:100px;}
+.idf.window_popup .btn_wrap button{width:100px;height:46px;font-size:1.6rem;}
 .idf.window_popup .title.gMarket_bold{font-size:2.8rem;;}
 .idf.window_popup .lock{width:28px;height:35px;background:url(/kofair_case_seed/usr/images/component/icon_lock.png) no-repeat center;margin:0 9px 0 0;vertical-align:sub;}
 
+.idf.window_popup.case_popup .box.gray_fill{width:calc(100% - 60px);margin:20px auto 0 auto;}
+.idf.window_popup.case_popup .input_box li{display:flex;width:100%;justify-content:center;align-items:center;gap:12px;}
+.idf.window_popup.case_popup .input_box input::placeholder{font-size:1.5rem;} 
+
 /* ==================== 모바일 ==================== */
 @media screen and (max-width: 767px){
   .popup_wrap{min-width:90%; width:90% !important;left:50% !important;top:50% !important;transform:translate(-50%,-50%) !important;}

src/main/webapp/kofair_case_seed/usr/style/style.css

@@ -101,6 +101,7 @@
 .table_type_cols table tbody td.table_number{color:#666;}
 .table_type_cols table tbody td.list_none{color:#666;}
 .table_type_cols table tbody td .list_title{color:#333;text-align:left;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
+.table_type_cols table tbody td.bbsTitle a{color:#333;text-align:left;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
 .table_type_cols table tbody td .select{min-width:0;}
 .table_type_cols table tfoot tr{border-bottom:1px solid #d8d8d8;background:#f4f5f7;text-align:center;}
 .table_type_cols table tfoot tr td{height:50px;color:#333;vertical-align:middle;}
@@ -487,7 +488,7 @@
   .icon.file.clip.blue{width:20px;height:20px;background:url(/kofair_case_seed/usr/images/component/icon_file_clip_blue.png) no-repeat center center;}
 
   /* sub layout */
-  .sub_visual{height:80px;background-size:auto 100%;background-position:right center;}
+  .sub_visual{height:80px;background-size:auto 100%;background-position:calc(100% + 90px) center;}
   .sub_visual h2{font-size:2.1rem;}
   
   .page_location{min-height:40px;height:auto;gap:0 25px;}