-
+
정보등록, 불러오기, 제출하기 기능 제공
조정 진행현황 확인 페이지
사건접수, 조정진행, 조정종결 등 단계별 진행현황을 확인
@@ -294,11 +370,11 @@ function goExpPage(num) {
-->
diff --git a/src/main/webapp/WEB-INF/jsp/web/main/mainPage.jsp b/src/main/webapp/WEB-INF/jsp/web/main/mainPage.jsp
index 30e527a4..db4fb904 100644
--- a/src/main/webapp/WEB-INF/jsp/web/main/mainPage.jsp
+++ b/src/main/webapp/WEB-INF/jsp/web/main/mainPage.jsp
@@ -177,7 +177,7 @@ function fn_egov_inqire_notice(bbsId, nttId) {
-
diff --git a/src/main/webapp/kccadrPb/usr/css/main.css b/src/main/webapp/kccadrPb/usr/css/main.css
index 1a67323a..a88a3c18 100644
--- a/src/main/webapp/kccadrPb/usr/css/main.css
+++ b/src/main/webapp/kccadrPb/usr/css/main.css
@@ -26,55 +26,50 @@ main{width: 100%; height: 100%; margin-top: 135px; padding-bottom: 90px; backgro
/* 바로가기 */
.baro_cont{padding: 0 20px; box-sizing: border-box; z-index: 21; position: relative; transition: all .3s ease;}
-.baro_cont .inner{max-width: 1200px; width: 100%; height: 180px; position: relative; display: flex; margin: -90px auto 0 auto; background-color: #fff; border-radius: 10px; margin-top: -90px; box-sizing: border-box; box-shadow: 0 0 10px rgba(0,0,0,0.15); z-index: 24;}
-.baro_cont a{width: calc(100% / 5); text-align: center; height: 100%; font-size: 21px; font-weight: 500; letter-spacing: -0.8px; position: relative; padding: 20px 0; box-sizing: border-box; transition: color 0.3s ease-in-out; z-index: 0;}
-.baro_cont a.on i,.baro_cont a.on p{position: relative; z-index: 29;}
-.baro_cont a.on{font-size: 22px; color: #ea5404; transition: color 0.1s linear; z-index: 25;}
-.baro_cont a::before{position: absolute; content: " "; width: calc(100% + 10px); height: calc(100% + 10px); border: 5px solid #ea5404; border-radius: 10px; left: 50%; top: 50%; transform: translate(-50%,-50%); background-color: #fff; z-index: 1; opacity: 0; transition: border 0.1s linear, opacity 0.1s linear; box-shadow: 0 0 10px rgba(0,0,0,0.5);z-index: 28;}
-.baro_cont a.on::before{opacity: 1; transition: border 0.1s linear, opacity 0.1s linear;}
-.baro_cont a::after{position: absolute; content: " "; width: 1px; height: calc(100% - 40px); background-color: #dadada; right: 0; top: 50%; transform: translateY(-50%);}
-.baro_cont a:last-child:after{display: none;}
+.baro_cont .inner{max-width: 1200px; width: 100%; height: 180px; position: relative; display: flex; margin: -90px auto 0 auto; background-color: #fff; border-radius: 10px; margin-top: -90px; box-sizing: border-box; box-shadow: 0 0 10px rgba(0,0,0,0.15); z-index: 15;}
+.baro_cont ul{display: flex; width: 100%; text-align: center;}
+.baro_cont ul li{position: relative; display: flex; width: calc(100% / 5); font-size: 21px; font-weight: 500; letter-spacing: -0.5px; justify-content: center; align-items: center;}
+.baro_cont ul li::after{position: absolute; content: " "; width: 1px; height: calc(100% - 40px); background-color: #d5d5d5; right: 0;}
+.baro_cont ul li:last-child:after{display: none;}
+.baro_cont ul li.on i,.baro_cont ul li.on p{position: relative;}
+.baro_cont ul li.on{font-size: 22px; font-weight: 600; color: #ea5404; background-color: #fff; transition: color 0.1s linear; z-index: 30;}
+.baro_cont ul li.on::before{position: absolute; content: " "; width: 100%; height: 100%; border: 5px solid #ea5404; border-radius: 10px; opacity: 1; transition: border 0.1s linear, opacity 0.1s linear; z-index: 10;}
+.baro_cont ul li a{width: 100%; height: 100%; padding: 36px 0 0 0; box-sizing: border-box;}
+.baro_cont ul li.on a{position: relative; z-index: 31;}
+.baro_cont ul li i{position: relative; width: 60px; height: 60px; display: block; background-repeat: no-repeat; background-position: center; background-size: contain; margin: 0 auto 18px auto; position: relative; transition: background-image 0.3s ease-in-out;}
+.baro_cont ul li i.baro_conciliate_apc{background-image: url(/kccadrPb/usr/image/main/icon_baro01.png);}
+.baro_cont ul li.on i.baro_conciliate_apc{background-image: url(/kccadrPb/usr/image/main/icon_baro01_hover.png);}
+.baro_cont ul li i.baro_document_submit{background-image: url(/kccadrPb/usr/image/main/icon_baro02.png);}
+.baro_cont ul li.on i.baro_document_submit{background-image: url(/kccadrPb/usr/image/main/icon_baro02_hover.png);}
+.baro_cont ul li i.baro_progress{background-image: url(/kccadrPb/usr/image/main/icon_baro03.png);}
+.baro_cont ul li.on i.baro_progress{background-image: url(/kccadrPb/usr/image/main/icon_baro03_hover.png);}
+.baro_cont ul li i.baro_issuance_records{background-image: url(/kccadrPb/usr/image/main/icon_baro04.png);}
+.baro_cont ul li.on i.baro_issuance_records{background-image: url(/kccadrPb/usr/image/main/icon_baro04_hover.png);}
+.baro_cont ul li i.baro_inquiry_board{background-image: url(/kccadrPb/usr/image/main/icon_baro05.png);}
+.baro_cont ul li.on i.baro_inquiry_board{background-image: url(/kccadrPb/usr/image/main/icon_baro05_hover.png);}
-.baro_cont i{position: relative; width: 60px; height: 60px; display: block; background-repeat: no-repeat; background-position: center; background-size: contain; margin: 18px auto 20px auto; position: relative; transition: background-image 0.3s ease-in-out;}
-.baro_cont p{position: relative;}
-.baro_cont a:nth-child(1) i{background-image: url(/kccadrPb/usr/image/main/icon_baro01.png);}
-.baro_cont a:nth-child(1).on i{background-image: url(/kccadrPb/usr/image/main/icon_baro01_hover.png);}
-.baro_cont a:nth-child(2) i{background-image: url(/kccadrPb/usr/image/main/icon_baro02.png);}
-.baro_cont a:nth-child(2).on i{background-image: url(/kccadrPb/usr/image/main/icon_baro02_hover.png);}
-.baro_cont a:nth-child(3) i{background-image: url(/kccadrPb/usr/image/main/icon_baro03.png);}
-.baro_cont a:nth-child(3).on i{background-image: url(/kccadrPb/usr/image/main/icon_baro03_hover.png);}
-.baro_cont a:nth-child(4) i{background-image: url(/kccadrPb/usr/image/main/icon_baro04.png);}
-.baro_cont a:nth-child(4).on i{background-image: url(/kccadrPb/usr/image/main/icon_baro04_hover.png);}
-.baro_cont a:nth-child(5) i{background-image: url(/kccadrPb/usr/image/main/icon_baro05.png);}
-.baro_cont a:nth-child(5).on i{background-image: url(/kccadrPb/usr/image/main/icon_baro05_hover.png);}
-
-/* .baro_cont.experience_cont a i{width: 48px;}
-.baro_cont.experience_cont a:nth-child(2) i{background-image: url(/kccadrPb/usr/image/main/icon_baro06.png);}
-.baro_cont.experience_cont a:nth-child(2).on i{background-image: url(/kccadrPb/usr/image/main/icon_baro06_hover.png);}
-.baro_cont.experience_cont a:nth-child(3) i{background-image: url(/kccadrPb/usr/image/main/icon_baro07.png);}
-.baro_cont.experience_cont a:nth-child(3).on i{background-image: url(/kccadrPb/usr/image/main/icon_baro07_hover.png);}
-.baro_cont.experience_cont a:nth-child(4) i{background-image: url(/kccadrPb/usr/image/main/icon_baro08.png);}
-.baro_cont.experience_cont a:nth-child(4).on i{background-image: url(/kccadrPb/usr/image/main/icon_baro08_hover.png);}
-.baro_cont.experience_cont a:nth-child(5) i{background-image: url(/kccadrPb/usr/image/main/icon_baro09.png);}
-.baro_cont.experience_cont a:nth-child(5).on i{background-image: url(/kccadrPb/usr/image/main/icon_baro09_hover.png);}
-.baro_cont.experience_cont a:nth-child(6) i{background-image: url(/kccadrPb/usr/image/main/icon_baro10.png);}
-.baro_cont.experience_cont a:nth-child(6).on i{background-image: url(/kccadrPb/usr/image/main/icon_baro10_hover.png);} */
-.baro_cont.experience_cont a:nth-child(6) i{width: 42px;}
-.baro_cont.experience_cont a:nth-child(6) i{background-image: url(/kccadrPb/usr/image/main/icon_baro10.png);}
-.baro_cont.experience_cont a:nth-child(6).on i{background-image: url(/kccadrPb/usr/image/main/icon_baro10_hover.png);}
-
-.mask{position: fixed; display: none; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(0,0,0,0.5); z-index: 24;}
-.tooltip_box{position: absolute; display: none; background-color: transparent; top: -100px; left: -10px; width: 500%; height: calc(100% - 30px); z-index: 30;}
-.tooltip_type01{display: inline-flex; justify-content: space-between; align-items: center; background-color: #fff; padding: 30px 30px 30px 42px; box-sizing: border-box; z-index: 99; border-radius: 5px; line-height: 1.3; box-shadow: 4px 8px 8px rgba(0,0,0,0.2); color: #222; text-align: left; margin-left: 60px;}
-.baro_cont a:nth-child(4) .tooltip_box{left: -10px; width: 400%;}
-.baro_cont a:nth-child(5) .tooltip_box{left: auto; right: -10px;}
-.baro_cont a:nth-child(6) .tooltip_box{left: auto; right: -10px;}
+.mask{position: fixed; display: none; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(0,0,0,0.5); z-index: 25;}
+.tooltip_box{position: absolute; display: none; background-color: transparent; top: -100px; left: calc(70% - 50px); width: 450%; height: calc(100% - 30px); z-index: 31; word-break: keep-all;}
+.baro_cont ul li:nth-child(2) .tooltip_box{left: calc(50% - 50px);}
+.baro_cont ul li:nth-child(3) .tooltip_box{left: calc(50% - 50px); width: 330%;}
+.baro_cont ul li:nth-child(4) .tooltip_box{left: auto;right: calc(100% - 50px); width: 350%;}
+.baro_cont ul li:nth-child(5) .tooltip_box{left: auto;right: calc(15% - 50px);}
+.tooltip_box .text_area{width: calc(100% - 180px); margin: 0; padding: 30px 0 30px 42px;}
+.tooltip_type01{display: inline-flex; justify-content: space-between; align-items: center; background-color: #fff; padding: 0 30px 0 0; box-sizing: border-box; z-index: 32; border-radius: 5px; line-height: 1.3; box-shadow: 4px 8px 8px rgba(0,0,0,0.2); color: #222; text-align: left; font-weight: 500;}
.tooltip_type01>*{display: inline-block; vertical-align: middle;}
.tooltip_tit01{font-size: 22px;}
.tooltip_tit02{font-size: 16px; margin-top: 10px;}
-.tooltip_type01 button{width: 168px; height: 48px; background-color: #ea5404; border-radius: 5px; color: #fff; font-size: 18px; float: right; margin-top: 22px; margin-left: 40px}
+.tooltip_type01 button{width: 180px; height: 48px; background-color: #ea5404; border-radius: 5px; color: #fff; font-size: 18px; float: right; margin-top: 22px; margin-left: 40px}
/* //바로가기 */
+/* 체험하기 - 바로가기 */
+.baro_cont.experience_cont ul li{width: calc(100% / 4);}
+.baro_cont.experience_cont .tooltip_box{position: absolute; display: none; background-color: transparent; top: -100px; left: calc(70% - 50px); width: 350%; height: calc(100% - 30px); z-index: 40; word-break: keep-all;}
+.baro_cont.experience_cont ul li:nth-child(2) .tooltip_box{left: calc(50% - 50px);}
+.baro_cont.experience_cont ul li:nth-child(3) .tooltip_box{left: auto; right: calc(40% - 10px); top: -90px;}
+.baro_cont.experience_cont ul li:nth-child(4) .tooltip_box{left: auto; right: calc(80% - 10px); top: -160px;}
+/* //체험하기 - 바로가기 */
+
.btm_cont{padding: 0 20px; box-sizing: border-box;}
.btm_cont .inner{max-width: 1200px; width: 100%; margin: 70px auto 0; display: flex; justify-content: space-between; align-items: stretch;}
.btm_cont .area_cont{width: calc((100% - 60px) / 3);}
@@ -188,6 +183,22 @@ main{width: 100%; height: 100%; margin-top: 135px; padding-bottom: 90px; backgro
.area_pz .pz_img.img03{background-image: url(/kccadrPb/usr/image/main/pz_img03.png);background-color: #506acc;} */
/* //팝업존 */
+@media all and (max-width: 1500px){
+ .baro_cont ul li:nth-child(3) .tooltip_box{width: 300%;}
+}
+@media all and (max-width: 1400px){
+ .baro_cont ul li .tooltip_box{width: 320%;}
+ .baro_cont ul li:nth-child(3) .tooltip_box{width: 240%;}
+ .baro_cont ul li:nth-child(4) .tooltip_box{right: calc(80% - 50px);}
+ .baro_cont ul li:nth-child(5) .tooltip_box{right: calc(80% - 50px);}
+
+ /* 체험하기 - 바로가기 */
+ .baro_cont.experience_cont ul li:nth-child(2) .tooltip_box{width: 320%; text-align: left;}
+ .baro_cont.experience_cont ul li:nth-child(3) .tooltip_box{right: calc(80% - 10px); top: -90px;}
+ .baro_cont.experience_cont ul li:nth-child(4) .tooltip_box{width: 320%;}
+ /* //체험하기 - 바로가기 */
+}
+
@media all and (max-width: 1200px){
.btm_cont .area_cont{width: calc((100% - 40px) / 3);}
@@ -200,19 +211,33 @@ main{width: 100%; height: 100%; margin-top: 135px; padding-bottom: 90px; backgro
.area_info .area_btm dd{width: 55%;}
/* //조정신청 안내 */
- .area_pz .cont{max-height: 311px;}
+ .area_pz .cont{max-height: 311px;}
+
+ /* 바로가기 */
+ .baro_cont ul li .tooltip_box{width: 400%; max-width: 500%; min-width: 100%; top: -90%; left: 10%;}
+ .baro_cont ul li:nth-child(2) .tooltip_box{width: 370%; top: -70%; left: 10%; text-align: left;}
+ .baro_cont ul li:nth-child(3) .tooltip_box{width: 280%; top: -80%; left: 10%;}
+ .baro_cont ul li:nth-child(4) .tooltip_box{width: 340%; top: -115%; right: 10%;}
+ .baro_cont ul li:nth-child(5) .tooltip_box{width: 300%; top: -70%; right: 10%; text-align: right;}
+
+ /* 체험하기 - 바로가기 */
+ .baro_cont.experience_cont ul li{width: calc(100% / 4);}
+ .baro_cont.experience_cont .tooltip_box{width: 250%; max-width: 400%; min-width: 100%; top: -160px; left: 80%;}
+ .baro_cont.experience_cont ul li:nth-child(2) .tooltip_box{width: 240%; left: calc(80% - 50px);}
+ .baro_cont.experience_cont ul li:nth-child(3) .tooltip_box{width: 200%; right: 80%;}
+ .baro_cont.experience_cont ul li:nth-child(4) .tooltip_box{width: 300%; right: 80%;}
+ /* //체험하기 - 바로가기 */
}
@media all and (max-width: 1024px){
/* 바로가기 */
.baro_cont .inner{height: 150px;}
- .baro_cont a{font-size: 19px;}
- .baro_cont a:hover{font-size: 20px;}
- .baro_cont a::before{width: calc(100% + 10px); height: calc(100% + 10px);}
- .baro_cont i{width: 45px; height: 45px; margin: 15px auto;}
-
- .tooltip_box{position: fixed; max-width: 100%; width: calc(100% - 30px); height: 326px; left: 50% !important; top: 260px;transform: translateX(-50%);}
- .baro_cont a:nth-child(4) .tooltip_type01{top: 260px;}
+ .baro_cont li{font-size: 19px;}
+ .baro_cont li:hover{font-size: 20px;}
+ .baro_cont li::before{width: calc(100% + 10px); height: calc(100% + 10px);}
+ .baro_cont ul li i{width: 45px; height: 45px; margin: 0 auto 15px auto;}
+ .baro_cont ul li .tooltip_box,.baro_cont.experience_cont ul li .tooltip_box{position: fixed; max-width: 100%; width: calc(100% - 30px); height: 210px; left: 50% !important; top: 230px !important;transform: translateX(-50%);}
+ .baro_cont ul li .tooltip_type01{position: absolute; width: calc(100% - 40px); left: 50%; transform: translateX(-50%); bottom: 0;}
/* //바로가기 */
/* 조정신청 안내 */
@@ -240,7 +265,7 @@ main{width: 100%; height: 100%; margin-top: 135px; padding-bottom: 90px; backgro
/* 바로가기 */
.baro_cont .inner{height: 130px;}
.baro_cont i{margin: 5px auto 15px auto;}
- .baro_cont a{font-size: 16px; word-break: keep-all; padding: 20px 7px; letter-spacing: 0; line-height: 1.2;}
+ .baro_cont ul li a{font-size: 16px; padding: 24px 7px; letter-spacing: 0; line-height: 1.2;}
.baro_cont a:hover{font-size: 16px;}
/* //바로가기 */
@@ -277,7 +302,7 @@ main{width: 100%; height: 100%; margin-top: 135px; padding-bottom: 90px; backgro
@media all and (max-width: 840px){
.tooltip_tit01{font-size: 18px; font-weight: 500;}
.tooltip_tit02{font-size: 14px;}
- .tooltip_box button{margin-top: 16px; margin-left: 0;}
+ .tooltip_box button{margin: 0;}
}
@media all and (max-width: 700px){
@@ -349,6 +374,10 @@ main{width: 100%; height: 100%; margin-top: 135px; padding-bottom: 90px; backgro
.main_visual .tag_area a:nth-child(n+4){display: none;}
/* //메인 비주얼 */
+ /* 바로가기 */
+ .baro_cont ul li i{width: 30px; height: 30px;}
+ .baro_cont ul li{word-break: keep-all;}
+
/* 조정신청 안내 */
.area_info .area_btm .tit{font-size: 20px;}
/* //조정신청 안내 */
diff --git a/src/main/webapp/kccadrPb/usr/script/main.js b/src/main/webapp/kccadrPb/usr/script/main.js
index 9b21007d..a3db0699 100644
--- a/src/main/webapp/kccadrPb/usr/script/main.js
+++ b/src/main/webapp/kccadrPb/usr/script/main.js
@@ -22,7 +22,18 @@ $(document).ready(function () {
});
/* //조정일정 스케줄 웹접근성 */
- $(".baro_cont a").mouseover(function(){
+ $(".baro_cont ul li").mouseover(function(){
+ if($(this).siblings().is("on") == false){
+ $(this).addClass("on");
+ $(".baro_cont").css("z-index","28");
+ $(".mask").fadeIn(100);
+ $(this).children(".tooltip_box").show();
+ $(this).siblings().removeClass("on");
+ $(this).next().siblings(".tooltip_box").hide()
+ }else{}
+ });
+
+ $(".baro_cont ul li").focusin(function(){
if($(this).siblings().is("on") == false){
$(this).addClass("on");
$(".baro_cont").css("z-index","28");
@@ -33,11 +44,37 @@ $(document).ready(function () {
}else{}
});
- $(".tooltip_box, .baro_cont a").mouseleave(function(){
+ $(".baro_cont li").mouseleave(function(){
$(".tooltip_box").hide();
$(".baro_cont").css("z-index","20");
$(".mask").fadeOut(100);
- $(".baro_cont a").removeClass("on");
+ $(".baro_cont li").removeClass("on");
+ });
+
+
+ $(".baro_cont li button").keydown(function (e) {
+ if (e.keyCode == "9") {
+ if (e.shiftKey) {
+ // shift+tab 했을 때
+ } else {
+ $(".tooltip_box").hide();
+ $(".baro_cont").css("z-index","20");
+ $(".mask").fadeOut(100);
+ $(".baro_cont li").removeClass("on");
+ }
+ }
+ });
+
+ $(".baro_cont li>a").keydown(function (e) {
+ if (e.keyCode == "9") {
+ if (e.shiftKey) {
+ // shift+tab 했을 때
+ $(".tooltip_box").hide();
+ $(".baro_cont").css("z-index","20");
+ $(".mask").fadeOut(100);
+ $(".baro_cont li").removeClass("on");
+ } else {}
+ }
});
// 웹접근성 - 포커스 시 자동 멈춤