tolag3/kcc_adr_advc_git
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2023/07/26 메인페이지, 체험하기 페이지 문구 수정 및 호버효과 추가

Browse Source
This commit is contained in:
subsub 2023-07-26 10:57:49 +09:00
parent be99e9ebd4
commit 74e09b5cd7
4 changed files with 307 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
src/main/webapp/WEB-INF/jsp/web/kccadr/adjstExp/mainExpPage.jsp
View File

@ -137,13 +137,13 @@ function goExpPage(num) {
</script> </script>
</head> </head>
<style> <style>
.baro_cont a{width: calc(100% / 4); 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{width: calc(100% / 4); 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;}
.tooltip_box{width: 400%;} .tooltip_box{width: 400%;}
.baro_cont a:nth-child(2) .tooltip_box{left: 35px;} .baro_cont a:nth-child(2) .tooltip_box{left: 35px;}
.baro_cont a:nth-child(3) .tooltip_box{left: -90px; right: auto;} .baro_cont a:nth-child(3) .tooltip_box{left: -90px; right: auto;}
.baro_cont a:nth-child(4) .tooltip_box{left: auto; right: -10px;} .baro_cont a:nth-child(4) .tooltip_box{left: auto; right: -10px;}
.baro_cont a:nth-child(5) .tooltip_box{width: 320%;left: auto; right: 200px;word-break: keep-all;} .baro_cont a:nth-child(5) .tooltip_box{width: 320%;left: auto; right: 200px;word-break: keep-all;} */
</style> </style>
<c:if test="${fn:length(popupList) > 0}" > <c:if test="${fn:length(popupList) > 0}" >
@ -225,6 +225,82 @@ function goExpPage(num) {
<!-- 바로가기 --> <!-- 바로가기 -->
<div class="baro_cont experience_cont"> <div class="baro_cont experience_cont">
<div class="inner"> <div class="inner">
<div class="mask"></div>
<ul>
<li>
<a href="#none" onclick="goExpPage(1);" title="조정신청 페이지 바로가기" id="first">
<i class="baro_conciliate_apc"></i>조정신청
</a>
<div class="tooltip_box">
<div class="tooltip_type01">
<a href="/web/kccadr/adjst/adjstReqRegistInformation.do" title="조정신청 페이지 바로가기" class="text_area">
<p class="tooltip_tit01">
저작권 분쟁조정 온라인 신청페이지<br>
본인을 포함한 분쟁 당사자 정보, 청구취지, 청구이유 등을 작성하여 신청
</p>
<p class="tooltip_tit02">(정보입력, 불러오기, 제출하기 기능 제공)</p>
</a>
<button type="button" title="페이지 이동" onclick="goExpPage(6);">조정신청 바로가기</button>
</div>
</div>
</li>
<li>
<a href="#" onclick="goExpPage(2);" title="서류제출 페이지 바로가기">
<i class="baro_document_submit"></i>서류제출
</a>
<div class="tooltip_box">
<div class="tooltip_type01">
<a href="/web/kccadr/accdnt/ai/adjstIncidentList.do" title="서류제출 페이지 바로가기" class="text_area">
<p class="tooltip_tit01">
조정 진행 관련 서류 제출 페이지<br>
준비서면, 답변서, 기일변경 신청서, 취하신청서 등 서류 제출
</p>
<p class="tooltip_tit02">(정보입력, 불러오기, 제출하기 기능 제공)</p>
</a>
<button type="button" title="페이지 이동" onclick="location.href='/web/kccadr/accdnt/ai/adjstIncidentList.do'">서류제출 바로가기</button>
</div>
</div>
</li>
<li>
<a href="#" onclick="goExpPage(3);" title="진행현황 페이지 바로가기">
<i class="baro_progress"></i>진행현황
</a>
<div class="tooltip_box">
<div class="tooltip_type01">
<a href="/web/kccadr/accdnt/ai/adjstIncidentList.do" title="진행현황 페이지 바로가기" class="text_area">
<p class="tooltip_tit01">
조정 진행현황 확인 페이지<br>
사건접수, 조정진행, 조정종결 등 단계별 진행현황을 확인
</p>
<p class="tooltip_tit02"></p>
</a>
<button type="button" title="페이지 이동" onclick="location.href='/web/kccadr/accdnt/ai/adjstIncidentList.do'">진행현황 바로가기</button>
</div>
</div>
</li>
<li>
<a href="#" onclick="goExpPage(4);" title="기록발급 페이지 바로가기">
<i class="baro_issuance_records"></i>기록발급
</a>
<div class="tooltip_box">
<div class="tooltip_type01">
<a href="/web/kccadr/payment/inipay/accdnt/ai/docIssReqList.do" title="기록발급 페이지 바로가기" class="text_area">
<p class="tooltip_tit01">
종결된 사건기록 발급 페이지<br>
조정종결통보서, 기일조서, 조정조서, 직권결정문, 직권결정문 송달 및 확정증명원 등 발급 신청(수수료 1,500원)
</p>
<p class="tooltip_tit02">
과거 오프라인 접수 사건 : 신청만 가능하고 발급된 서류는 우편으로 수령<br>
전자조정시스템 접수 사건 : 우편 또는 온라인 발급 모두 가능
</p>
</a>
<button type="button" title="페이지 이동" onclick="goExpPage(4);">기록발급 바로가기</button>
</div>
</div>
</li>
</ul>
</div>
<!-- <div class="inner">
<div class="mask"></div> <div class="mask"></div>
<a href="#" onclick="goExpPage(1);" title="조정신청 페이지 바로가기"><i></i> <a href="#" onclick="goExpPage(1);" title="조정신청 페이지 바로가기"><i></i>
<p>조정신청</p> <p>조정신청</p>
@ -232,15 +308,15 @@ function goExpPage(num) {
<div class="tooltip_type01"> <div class="tooltip_type01">
<div class="text_area"> <div class="text_area">
<p class="tooltip_tit01"> <p class="tooltip_tit01">
<!-- 조정사건을 신청하는 기능<br> 조정사건을 신청하는 기능<br>
사건 유형별, 사건정보를 등록하여 조정신청을 진행 --> 사건 유형별, 사건정보를 등록하여 조정신청을 진행
저작권 분쟁조정 온라인 신청페이지<br> 저작권 분쟁조정 온라인 신청페이지<br>
본인을 포함한 분쟁 당사자 정보, 청구취지, 청구이유 등을 작성하여 신청 본인을 포함한 분쟁 당사자 정보, 청구취지, 청구이유 등을 작성하여 신청
</p> </p>
<!-- <p class="tooltip_tit02">정보등록, 불러오기, 제출하기 기능 제공</p> --> <p class="tooltip_tit02">정보등록, 불러오기, 제출하기 기능 제공</p>
<p class="tooltip_tit02">(정보입력, 불러오기, 제출하기 기능 제공)</p> <p class="tooltip_tit02">(정보입력, 불러오기, 제출하기 기능 제공)</p>
</div> </div>
<!-- <button type="button" title="페이지 이동">전자조정 등록</button> --> <button type="button" title="페이지 이동">전자조정 등록</button>
<button type="button" title="페이지 이동" onclick="goExpPage(6);">조정신청 바로가기</button> <button type="button" title="페이지 이동" onclick="goExpPage(6);">조정신청 바로가기</button>
</div> </div>
</div> </div>
@ -251,11 +327,11 @@ function goExpPage(num) {
<div class="tooltip_box"> <div class="tooltip_box">
<div class="tooltip_type01"> <div class="tooltip_type01">
<div class="text_area"> <div class="text_area">
<!-- <p class="tooltip_tit01"> <p class="tooltip_tit01">
조정사건을 신청하는 기능<br> 조정사건을 신청하는 기능<br>
사건 유형별, 사건정보를 등록하여 조정신청을 진행 사건 유형별, 사건정보를 등록하여 조정신청을 진행
</p> </p>
<p class="tooltip_tit02">정보등록, 불러오기, 제출하기 기능 제공</p> --> <p class="tooltip_tit02">정보등록, 불러오기, 제출하기 기능 제공</p>
<p class="tooltip_tit01"> <p class="tooltip_tit01">
조정 진행 관련 서류 제출 페이지<br> 조정 진행 관련 서류 제출 페이지<br>
준비서면, 답변서, 기일변경 신청서, 취하신청서 등 서류 제출 준비서면, 답변서, 기일변경 신청서, 취하신청서 등 서류 제출
@ -268,16 +344,16 @@ function goExpPage(num) {
</a> </a>
<a href="#" onclick="goExpPage(3);" title="진행현황 페이지 바로가기"><i></i> <a href="#" onclick="goExpPage(3);" title="진행현황 페이지 바로가기"><i></i>
<!-- <p>진행현황</p> --> <p>진행현황</p>
<p>진행현황</p> <p>진행현황</p>
<div class="tooltip_box"> <div class="tooltip_box">
<div class="tooltip_type01"> <div class="tooltip_type01">
<div class="text_area"> <div class="text_area">
<!-- <p class="tooltip_tit01"> <p class="tooltip_tit01">
조정사건을 신청하는 기능<br> 조정사건을 신청하는 기능<br>
사건 유형별, 사건정보를 등록하여 조정신청을 진행 사건 유형별, 사건정보를 등록하여 조정신청을 진행
</p> </p>
<p class="tooltip_tit02">정보등록, 불러오기, 제출하기 기능 제공</p> --> <p class="tooltip_tit02">정보등록, 불러오기, 제출하기 기능 제공</p>
<p class="tooltip_tit01"> <p class="tooltip_tit01">
조정 진행현황 확인 페이지<br> 조정 진행현황 확인 페이지<br>
사건접수, 조정진행, 조정종결 등 단계별 진행현황을 확인 사건접수, 조정진행, 조정종결 등 단계별 진행현황을 확인
@ -294,11 +370,11 @@ function goExpPage(num) {
<div class="tooltip_box"> <div class="tooltip_box">
<div class="tooltip_type01"> <div class="tooltip_type01">
<div class="text_area"> <div class="text_area">
<!-- <p class="tooltip_tit01"> <p class="tooltip_tit01">
조정사건을 신청하는 기능<br> 조정사건을 신청하는 기능<br>
사건 유형별, 사건정보를 등록하여 조정신청을 진행 사건 유형별, 사건정보를 등록하여 조정신청을 진행
</p> </p>
<p class="tooltip_tit02">정보등록, 불러오기, 제출하기 기능 제공</p> --> <p class="tooltip_tit02">정보등록, 불러오기, 제출하기 기능 제공</p>
<p class="tooltip_tit01"> <p class="tooltip_tit01">
종결된 사건기록 발급 페이지<br> 종결된 사건기록 발급 페이지<br>
조정종결통보서, 기일조서, 조정조서, 직권결정문, 직권결정문 송달 및 확정증명원 등 발급 신청(수수료 1,500원) 조정종결통보서, 기일조서, 조정조서, 직권결정문, 직권결정문 송달 및 확정증명원 등 발급 신청(수수료 1,500원)
@ -313,7 +389,7 @@ function goExpPage(num) {
</div> </div>
</a> </a>
<!-- <a href="#" onclick="goExpPage(5);" title="문의게시판 페이지 바로가기"><i></i> <a href="#" onclick="goExpPage(5);" title="문의게시판 페이지 바로가기"><i></i>
<p>조정결과</p> <p>조정결과</p>
<div class="tooltip_box"> <div class="tooltip_box">
<div class="tooltip_type01"> <div class="tooltip_type01">
@ -327,9 +403,9 @@ function goExpPage(num) {
<button type="button" title="페이지 이동">전자조정 등록</button> <button type="button" title="페이지 이동">전자조정 등록</button>
</div> </div>
</div> </div>
</a> --> </a>
</div> </div> -->
</div> </div>
<!-- //바로가기 --> <!-- //바로가기 -->

94
src/main/webapp/WEB-INF/jsp/web/main/mainPage.jsp
View File

@ -177,7 +177,7 @@ function fn_egov_inqire_notice(bbsId, nttId) {
<!-- 바로가기 --> <!-- 바로가기 -->
<div class="baro_cont"> <div class="baro_cont">
<div class="inner"> <!-- <div class="inner">
<a href="/web/kccadr/adjst/adjstReqRegistInformation.do" title="조정신청 페이지 바로가기" id="first"><i></i> <a href="/web/kccadr/adjst/adjstReqRegistInformation.do" title="조정신청 페이지 바로가기" id="first"><i></i>
<p>조정신청</p> <p>조정신청</p>
</a> </a>
@ -193,6 +193,98 @@ function fn_egov_inqire_notice(bbsId, nttId) {
<a href="/web/cop/bbsWeb/selectBoardList.do?bbsId=BBSMSTR_000000000654" title="문의 게시판 페이지 바로가기"><i></i> <a href="/web/cop/bbsWeb/selectBoardList.do?bbsId=BBSMSTR_000000000654" title="문의 게시판 페이지 바로가기"><i></i>
<p>문의게시판</p> <p>문의게시판</p>
</a> </a>
</div> -->
<div class="inner">
<div class="mask"></div>
<ul>
<li>
<a href="/web/kccadr/adjst/adjstReqRegistInformation.do" title="조정신청 페이지 바로가기" id="first">
<i class="baro_conciliate_apc"></i>조정신청
</a>
<div class="tooltip_box">
<div class="tooltip_type01">
<a href="/web/kccadr/adjst/adjstReqRegistInformation.do" title="조정신청 페이지 바로가기" class="text_area">
<p class="tooltip_tit01">
저작권 분쟁조정 온라인 신청페이지<br>
본인을 포함한 분쟁 당사자 정보, 청구취지, 청구이유 등을 작성하여 신청
</p>
<p class="tooltip_tit02">(정보입력, 불러오기, 제출하기 기능 제공)</p>
</a>
<button type="button" title="페이지 이동" onclick="location.href='/web/kccadr/adjst/adjstReqRegistInformation.do'">조정신청 바로가기</button>
</div>
</div>
</li>
<li>
<a href="/web/kccadr/accdnt/ai/adjstIncidentList.do" title="서류제출 페이지 바로가기">
<i class="baro_document_submit"></i>서류제출
</a>
<div class="tooltip_box">
<div class="tooltip_type01">
<a href="/web/kccadr/accdnt/ai/adjstIncidentList.do" title="서류제출 페이지 바로가기" class="text_area">
<p class="tooltip_tit01">
조정 진행 관련 서류 제출 페이지<br>
준비서면, 답변서, 기일변경 신청서, 취하신청서 등 서류 제출
</p>
<p class="tooltip_tit02">(정보입력, 불러오기, 제출하기 기능 제공)</p>
</a>
<button type="button" title="페이지 이동" onclick="location.href='/web/kccadr/accdnt/ai/adjstIncidentList.do'">서류제출 바로가기</button>
</div>
</div>
</li>
<li>
<a href="/web/kccadr/accdnt/ai/adjstIncidentList.do" title="진행상황 페이지 바로가기">
<i class="baro_progress"></i>진행상황
</a>
<div class="tooltip_box">
<div class="tooltip_type01">
<a href="/web/kccadr/accdnt/ai/adjstIncidentList.do" title="진행상황 페이지 바로가기" class="text_area">
<p class="tooltip_tit01">
조정 진행현황 확인 페이지<br>
사건접수, 조정진행, 조정종결 등 단계별 진행현황을 확인
</p>
<p class="tooltip_tit02"></p>
</a>
<button type="button" title="페이지 이동" onclick="location.href='/web/kccadr/accdnt/ai/adjstIncidentList.do'">진행상황 바로가기</button>
</div>
</div>
</li>
<li>
<a href="/web/kccadr/payment/inipay/accdnt/ai/docIssReqList.do" title="기록발급 페이지 바로가기">
<i class="baro_issuance_records"></i>기록발급
</a>
<div class="tooltip_box">
<div class="tooltip_type01">
<a href="/web/kccadr/payment/inipay/accdnt/ai/docIssReqList.do" title="기록발급 페이지 바로가기" class="text_area">
<p class="tooltip_tit01">
종결된 사건기록 발급 페이지<br>
조정종결통보서, 기일조서, 조정조서, 직권결정문, 직권결정문 송달 및 확정증명원 등 발급 신청(수수료 1,500원)
</p>
<p class="tooltip_tit02">
과거 오프라인 접수 사건 : 신청만 가능하고 발급된 서류는 우편으로 수령<br>
전자조정시스템 접수 사건 : 우편 또는 온라인 발급 모두 가능
</p>
</a>
<button type="button" title="페이지 이동" onclick="location.href='/web/kccadr/payment/inipay/accdnt/ai/docIssReqList.do'">기록발급 바로가기</button>
</div>
</div>
</li>
<li>
<a href="/web/cop/bbsWeb/selectBoardList.do?bbsId=BBSMSTR_000000000654" title="문의 게시판 페이지 바로가기">
<i class="baro_inquiry_board"></i>문의게시판
</a>
<div class="tooltip_box">
<div class="tooltip_type01">
<a href="/web/cop/bbsWeb/selectBoardList.do?bbsId=BBSMSTR_000000000654" title="문의 게시판 페이지 바로가기" class="text_area">
<p class="tooltip_tit01">
조정신청 또는 진행 중 본인의 사건과<br>관련한 문의와 답변을 받을 수 있는 게시판
</p>
<p class="tooltip_tit02">- 전자조정시스템 회원가입 및 로그인 필수</p>
</a>
<button type="button" title="페이지 이동" onclick="location.href='/web/cop/bbsWeb/selectBoardList.do?bbsId=BBSMSTR_000000000654'">문의게시판 바로가기</button>
</div>
</div>
</li>
</ul>
</div> </div>
</div> </div>
<!-- //바로가기 --> <!-- //바로가기 -->

133
src/main/webapp/kccadrPb/usr/css/main.css
View File

@ -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{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 .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 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 ul{display: flex; width: 100%; text-align: center;}
.baro_cont a.on i,.baro_cont a.on p{position: relative; z-index: 29;} .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 a.on{font-size: 22px; color: #ea5404; transition: color 0.1s linear; z-index: 25;} .baro_cont ul li::after{position: absolute; content: " "; width: 1px; height: calc(100% - 40px); background-color: #d5d5d5; right: 0;}
.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 ul li:last-child:after{display: none;}
.baro_cont a.on::before{opacity: 1; transition: border 0.1s linear, opacity 0.1s linear;} .baro_cont ul li.on i,.baro_cont ul li.on p{position: relative;}
.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 ul li.on{font-size: 22px; font-weight: 600; color: #ea5404; background-color: #fff; transition: color 0.1s linear; z-index: 30;}
.baro_cont a:last-child:after{display: none;} .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;} .mask{position: fixed; display: none; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(0,0,0,0.5); z-index: 25;}
.baro_cont p{position: relative;} .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 a:nth-child(1) i{background-image: url(/kccadrPb/usr/image/main/icon_baro01.png);} .baro_cont ul li:nth-child(2) .tooltip_box{left: calc(50% - 50px);}
.baro_cont a:nth-child(1).on i{background-image: url(/kccadrPb/usr/image/main/icon_baro01_hover.png);} .baro_cont ul li:nth-child(3) .tooltip_box{left: calc(50% - 50px); width: 330%;}
.baro_cont a:nth-child(2) i{background-image: url(/kccadrPb/usr/image/main/icon_baro02.png);} .baro_cont ul li:nth-child(4) .tooltip_box{left: auto;right: calc(100% - 50px); width: 350%;}
.baro_cont a:nth-child(2).on i{background-image: url(/kccadrPb/usr/image/main/icon_baro02_hover.png);} .baro_cont ul li:nth-child(5) .tooltip_box{left: auto;right: calc(15% - 50px);}
.baro_cont a:nth-child(3) i{background-image: url(/kccadrPb/usr/image/main/icon_baro03.png);} .tooltip_box .text_area{width: calc(100% - 180px); margin: 0; padding: 30px 0 30px 42px;}
.baro_cont a:nth-child(3).on i{background-image: url(/kccadrPb/usr/image/main/icon_baro03_hover.png);} .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;}
.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;}
.tooltip_type01>*{display: inline-block; vertical-align: middle;} .tooltip_type01>*{display: inline-block; vertical-align: middle;}
.tooltip_tit01{font-size: 22px;} .tooltip_tit01{font-size: 22px;}
.tooltip_tit02{font-size: 16px; margin-top: 10px;} .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{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 .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);} .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;} */ .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){ @media all and (max-width: 1200px){
.btm_cont .area_cont{width: calc((100% - 40px) / 3);} .btm_cont .area_cont{width: calc((100% - 40px) / 3);}
@ -201,18 +212,32 @@ main{width: 100%; height: 100%; margin-top: 135px; padding-bottom: 90px; backgro
/* //조정신청 안내 */ /* //조정신청 안내 */
.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){ @media all and (max-width: 1024px){
/* 바로가기 */ /* 바로가기 */
.baro_cont .inner{height: 150px;} .baro_cont .inner{height: 150px;}
.baro_cont a{font-size: 19px;} .baro_cont li{font-size: 19px;}
.baro_cont a:hover{font-size: 20px;} .baro_cont li:hover{font-size: 20px;}
.baro_cont a::before{width: calc(100% + 10px); height: calc(100% + 10px);} .baro_cont li::before{width: calc(100% + 10px); height: calc(100% + 10px);}
.baro_cont i{width: 45px; height: 45px; margin: 15px auto;} .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%);}
.tooltip_box{position: fixed; max-width: 100%; width: calc(100% - 30px); height: 326px; left: 50% !important; top: 260px;transform: translateX(-50%);} .baro_cont ul li .tooltip_type01{position: absolute; width: calc(100% - 40px); left: 50%; transform: translateX(-50%); bottom: 0;}
.baro_cont a:nth-child(4) .tooltip_type01{top: 260px;}
/* //바로가기 */ /* //바로가기 */
/* 조정신청 안내 */ /* 조정신청 안내 */
@ -240,7 +265,7 @@ main{width: 100%; height: 100%; margin-top: 135px; padding-bottom: 90px; backgro
/* 바로가기 */ /* 바로가기 */
.baro_cont .inner{height: 130px;} .baro_cont .inner{height: 130px;}
.baro_cont i{margin: 5px auto 15px auto;} .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;} .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){ @media all and (max-width: 840px){
.tooltip_tit01{font-size: 18px; font-weight: 500;} .tooltip_tit01{font-size: 18px; font-weight: 500;}
.tooltip_tit02{font-size: 14px;} .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){ @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;} .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;} .area_info .area_btm .tit{font-size: 20px;}
/* //조정신청 안내 */ /* //조정신청 안내 */

43
src/main/webapp/kccadrPb/usr/script/main.js
View File

@ -22,7 +22,7 @@ $(document).ready(function () {
}); });
/* //조정일정 스케줄 웹접근성 */ /* //조정일정 스케줄 웹접근성 */
$(".baro_cont a").mouseover(function(){ $(".baro_cont ul li").mouseover(function(){
if($(this).siblings().is("on") == false){ if($(this).siblings().is("on") == false){
$(this).addClass("on"); $(this).addClass("on");
$(".baro_cont").css("z-index","28"); $(".baro_cont").css("z-index","28");
@ -33,11 +33,48 @@ $(document).ready(function () {
}else{} }else{}
}); });
$(".tooltip_box, .baro_cont a").mouseleave(function(){ $(".baro_cont ul li").focusin(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 li").mouseleave(function(){
$(".tooltip_box").hide(); $(".tooltip_box").hide();
$(".baro_cont").css("z-index","20"); $(".baro_cont").css("z-index","20");
$(".mask").fadeOut(100); $(".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 {}
}
}); });
// 웹접근성 - 포커스 시 자동 멈춤 // 웹접근성 - 포커스 시 자동 멈춤