Merge branch 'sub'
This commit is contained in:
subsub8729
commit
6486168898
@ -37,16 +37,16 @@ main{width: 100%; height: 100%; margin-top: 135px; padding-bottom: 90px; backgro
|
||||
|
||||
.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(2) i{background-image: url(/kccadrPb/usr/image/main/icon_baro01.png);}
|
||||
.baro_cont a:nth-child(2).on i{background-image: url(/kccadrPb/usr/image/main/icon_baro01_hover.png);}
|
||||
.baro_cont a:nth-child(3) i{background-image: url(/kccadrPb/usr/image/main/icon_baro02.png);}
|
||||
.baro_cont a:nth-child(3).on i{background-image: url(/kccadrPb/usr/image/main/icon_baro02_hover.png);}
|
||||
.baro_cont a:nth-child(4) i{background-image: url(/kccadrPb/usr/image/main/icon_baro03.png);}
|
||||
.baro_cont a:nth-child(4).on i{background-image: url(/kccadrPb/usr/image/main/icon_baro03_hover.png);}
|
||||
.baro_cont a:nth-child(5) i{background-image: url(/kccadrPb/usr/image/main/icon_baro04.png);}
|
||||
.baro_cont a:nth-child(5).on i{background-image: url(/kccadrPb/usr/image/main/icon_baro04_hover.png);}
|
||||
.baro_cont a:nth-child(6) i{background-image: url(/kccadrPb/usr/image/main/icon_baro05.png);}
|
||||
.baro_cont a:nth-child(6).on i{background-image: url(/kccadrPb/usr/image/main/icon_baro05_hover.png);}
|
||||
.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);}
|
||||
@ -61,10 +61,11 @@ main{width: 100%; height: 100%; margin-top: 135px; padding-bottom: 90px; backgro
|
||||
.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: 25;}
|
||||
.tooltip_type01{position: absolute; display: none; justify-content: space-between; align-items: center; width: 320%; top: -40px; left: calc(100% + 20px); 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;}
|
||||
.baro_cont a:nth-child(4) .tooltip_type01{top: -140px; left: 0;}
|
||||
.baro_cont a:nth-child(5) .tooltip_type01{left: calc(-320%);}
|
||||
.baro_cont a:nth-child(6) .tooltip_type01{left: calc(-320%);}
|
||||
.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_tit01{font-size: 22px;}
|
||||
.tooltip_tit02{font-size: 16px; margin-top: 10px;}
|
||||
@ -195,7 +196,7 @@ main{width: 100%; height: 100%; margin-top: 135px; padding-bottom: 90px; backgro
|
||||
.baro_cont a::before{width: calc(100% + 10px); height: calc(100% + 10px);}
|
||||
.baro_cont i{width: 45px; height: 45px; margin: 15px auto;}
|
||||
|
||||
.tooltip_type01{position: fixed; max-width: 100%; width: calc(100% - 30px); left: 50% !important; top: 260px;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 a:nth-child(4) .tooltip_type01{top: 260px;}
|
||||
/* //바로가기 */
|
||||
|
||||
@ -259,13 +260,13 @@ 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_type01 button{margin-top: 16px; margin-left: 0;}
|
||||
.tooltip_box button{margin-top: 16px; margin-left: 0;}
|
||||
}
|
||||
|
||||
@media all and (max-width: 700px){
|
||||
.tooltip_type01 .text_area{width: 100%; display: block;text-align: center;}
|
||||
.tooltip_type01 button{float: none; display: block; text-align: center; margin: 20px auto 0;}
|
||||
.tooltip_type01{top: 200px;}
|
||||
.tooltip_box{top: 200px;}
|
||||
}
|
||||
|
||||
@media all and (max-width: 640px){
|
||||
@ -291,7 +292,7 @@ main{width: 100%; height: 100%; margin-top: 135px; padding-bottom: 90px; backgro
|
||||
/* //팝업존 */
|
||||
|
||||
.mask{background-color: transparent; z-index: -1;}
|
||||
.tooltip_type01{display: none !important;}
|
||||
.tooltip_box{display: none !important;}
|
||||
}
|
||||
|
||||
@media all and (max-width: 530px){
|
||||
|
||||
82
src/main/webapp/kccadrPb/usr/guide2022.html
Normal file
82
src/main/webapp/kccadrPb/usr/guide2022.html
Normal file
@ -0,0 +1,82 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>가이드</title>
|
||||
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');
|
||||
* {padding: 0;margin: 0;text-decoration: none;color: inherit;font-family: 'Noto Sans KR', sans-serif;}
|
||||
ul,li {list-style: none;}
|
||||
body {padding: 50px;}
|
||||
.tab {display: flex;}
|
||||
.tab li {border: 1px solid #d5d5d5;width: 150px;text-align: center;padding: 10px 0;margin-right: 10px;}
|
||||
.wrap {display: flex;}
|
||||
.area_left,.area_right {width: 50%;}
|
||||
.area_right div {min-height: 50%;}
|
||||
.menu {max-width: 1200px;margin: 0 auto;margin-bottom: 15px;}
|
||||
.menu_tit {font-weight: 700;font-size: 16px;letter-spacing: -0.5px;max-width: 1200px;margin-top: 20px;margin-bottom: 10px;text-align: left;}
|
||||
.dep01 li {position: relative;}
|
||||
.dep01 li::after {position: absolute;content: "-";left: 10px;}
|
||||
.dep01 li a {padding-left: 20px;font-size: 15px;}
|
||||
.dep01 li p {display: inline-block;padding-left: 20px;font-size: 15px;}
|
||||
.dep02 {padding-left: 20px;}
|
||||
.dep02 li::after {position: absolute;content: "·";left: 0px;}
|
||||
.dep02 li a {padding-left: 15px;font-size: 15px;}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ul class="tab">
|
||||
<li><a href="/kccadrPb/usr/guide.html"><font style="color: red;">사용자 퍼블목록</font></a></li>
|
||||
<li><a href="/kccadrPb/adm/guide.html">관리자 퍼블목록</a></li>
|
||||
</ul>
|
||||
<div class="wrap">
|
||||
<div class="area_left">
|
||||
<a href="/kccadrPb/usr/index.html">
|
||||
<p class="menu_tit">메인</p>
|
||||
</a>
|
||||
<div class="menu">
|
||||
<ul class="dep01">
|
||||
<li><a href="#">XX 목록(완료 8.13)</a></li>
|
||||
<li><a href="#">XX 상세(작업중)</a></li>
|
||||
<li><a href="/kccadrPb/usr/index2.html">메인 체험하기(수정 9.15)</a></li>
|
||||
<li><a href="/kccadrPb/usr/sub02_1_04.html">신청취지/원인 (수정 9.15)</a></li>
|
||||
</ul>
|
||||
<p class="menu_tit">남은내역</p>
|
||||
<div class="menu">
|
||||
<ul class="dep01">
|
||||
<!-- <li><a href="#">이용안내(예정)</a></li>
|
||||
<li><a href="#">조정안내(예정)</a></li> -->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="area_right">
|
||||
<div><b>* 완료시 요청자가 내용 삭제</b>
|
||||
<div><b>개발자 요청사항</b>
|
||||
<ul class="dep01">
|
||||
<li>
|
||||
<p>
|
||||
xx 요청드려요~(요청 8.13 여현준)
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div><b>퍼블리셔 요청사항</b>
|
||||
<ul class="dep01">
|
||||
<li>
|
||||
<p>
|
||||
xx 확인 및 XX 부탁드려요~(요청 8.13 정수빈)
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -260,6 +260,7 @@
|
||||
<div class="mask"></div>
|
||||
<a href="/" title="접수 페이지 바로가기"><i></i>
|
||||
<p>접수</p>
|
||||
<div class="tooltip_box">
|
||||
<div class="tooltip_type01">
|
||||
<div class="text_area">
|
||||
<p class="tooltip_tit01">
|
||||
@ -270,10 +271,12 @@
|
||||
</div>
|
||||
<button type="button" title="페이지 이동">전자조정 등록</button>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="/" title="기일지정 페이지 바로가기"><i></i>
|
||||
<p>기일지정</p>
|
||||
<div class="tooltip_box">
|
||||
<div class="tooltip_type01">
|
||||
<div class="text_area">
|
||||
<p class="tooltip_tit01">
|
||||
@ -284,10 +287,12 @@
|
||||
</div>
|
||||
<button type="button" title="페이지 이동">전자조정 등록</button>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="/" title="기일개최 페이지 바로가기"><i></i>
|
||||
<p>기일개최</p>
|
||||
<div class="tooltip_box">
|
||||
<div class="tooltip_type01">
|
||||
<div class="text_area">
|
||||
<p class="tooltip_tit01">
|
||||
@ -298,10 +303,12 @@
|
||||
</div>
|
||||
<button type="button" title="페이지 이동">전자조정 등록</button>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="/" title="조정중 페이지 바로가기"><i></i>
|
||||
<p>조정중</p>
|
||||
<div class="tooltip_box">
|
||||
<div class="tooltip_type01">
|
||||
<div class="text_area">
|
||||
<p class="tooltip_tit01">
|
||||
@ -312,10 +319,12 @@
|
||||
</div>
|
||||
<button type="button" title="페이지 이동">전자조정 등록</button>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="/" title="종료 페이지 바로가기"><i></i>
|
||||
<p>종료</p>
|
||||
<div class="tooltip_box">
|
||||
<div class="tooltip_type01">
|
||||
<div class="text_area">
|
||||
<p class="tooltip_tit01">
|
||||
@ -326,6 +335,7 @@
|
||||
</div>
|
||||
<button type="button" title="페이지 이동">전자조정 등록</button>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
@ -26,17 +26,17 @@ $(document).ready(function () {
|
||||
if($(this).siblings().is("on") == false){
|
||||
$(this).addClass("on");
|
||||
$(".mask").show();
|
||||
$(this).children(".tooltip_type01").show();
|
||||
$(this).children(".tooltip_box").show();
|
||||
$(this).siblings().removeClass("on");
|
||||
$(this).next().siblings(".tooltip_type01").hide()
|
||||
$(this).next().siblings(".tooltip_box").hide()
|
||||
}else{}
|
||||
});
|
||||
|
||||
$(".tooltip_type01").mouseleave(function(){
|
||||
$(".tooltip_type01").hide();
|
||||
$(".tooltip_box, .baro_cont a").mouseleave(function(){
|
||||
$(".tooltip_box").hide();
|
||||
$(".mask").hide();
|
||||
$(".baro_cont a").removeClass("on");
|
||||
});
|
||||
})
|
||||
});
|
||||
|
||||
function main_visual() {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user