22/09/15 사용자 메인 체험하기 추가

src/main/webapp/kccadrPb/usr/css/main.css

@@ -25,26 +25,50 @@ main{width: 100%; height: 100%; margin-top: 135px; padding-bottom: 90px; backgro
 /* //메인비주얼 */
 
 /* 바로가기 */
-.baro_cont{padding: 0 20px; box-sizing: border-box;}
+.baro_cont{padding: 0 20px; box-sizing: border-box; z-index: 21; position: relative;}
-.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: 12;}
+.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;}
+.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:hover{font-size: 22px; color: #ea5404; transition: color 0.1s linear;}
+.baro_cont a.on i,.baro_cont a.on p{position: relative; z-index: 29;}
-.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);}
+.baro_cont a.on{font-size: 22px; color: #ea5404; transition: color 0.1s linear; z-index: 25;}
-.baro_cont a:hover::before{opacity: 1; transition: border 0.1s linear, opacity 0.1s linear;}
+.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 i{width: 60px; height: 60px; display: block; background-repeat: no-repeat; background-position: center; background-size: contain; margin: 18px auto 20px auto; position: relative; z-index: 1; transition: background-image 0.3s ease-in-out;}
+
-.baro_cont p{position: relative; z-index: 1;}
+.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 a:nth-child(1) i{background-image: url(/kccadrPb/usr/image/main/icon_baro01.png);}
+.baro_cont p{position: relative;}
-.baro_cont a:nth-child(1):hover 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_baro01.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_baro01_hover.png);}
-.baro_cont a:nth-child(2):hover 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_baro02.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_baro02_hover.png);}
-.baro_cont a:nth-child(3):hover 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_baro03.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_baro03_hover.png);}
-.baro_cont a:nth-child(4):hover 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_baro04.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_baro04_hover.png);}
-.baro_cont a:nth-child(5):hover i{background-image: url(/kccadrPb/usr/image/main/icon_baro05_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.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);}
+
+.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_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}
 /* //바로가기 */
 
 .btm_cont{padding: 0 20px; box-sizing: border-box;}
@@ -170,6 +194,9 @@ main{width: 100%; height: 100%; margin-top: 135px; padding-bottom: 90px; backgro
 	.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_type01{position: fixed; max-width: 100%; width: calc(100% - 30px); left: 50% !important; top: 260px;transform: translateX(-50%);}
+	.baro_cont a:nth-child(4) .tooltip_type01{top: 260px;}
 	/* //바로가기 */
 	
 	/* 조정신청 안내 */
@@ -229,6 +256,18 @@ 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;}
+}
+
+@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;}
+}
+
 @media all and (max-width: 640px){
 
 	.btm_cont{padding-bottom: 40px;}
@@ -250,6 +289,9 @@ main{width: 100%; height: 100%; margin-top: 135px; padding-bottom: 90px; backgro
 	.area_pz .pz_img.img02{background-color: #7c50cc;}
 	.area_pz .pz_img.img03{background-color: #506acc;} */
 	/* //팝업존 */
+	
+	.mask{background-color: transparent; z-index: -1;}
+	.tooltip_type01{display: none !important;}
 }
 
 @media all and (max-width: 530px){

src/main/webapp/kccadrPb/usr/guide.html

@@ -43,6 +43,7 @@
 				<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_01.html">조정신청 안내(완료)</a></li>
 					<li><a href="/kccadrPb/usr/sub02_1_02.html">신청인 정보(완료) (수정 10.7, 이전신청 불러오기 팝업 추가)</a></li>
 					<li><a href="/kccadrPb/usr/sub02_1_03.html">피신청인 정보(완료)</a></li>

src/main/webapp/kccadrPb/usr/index2.html

@@ -0,0 +1,487 @@
+<!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>
+
+	<!-- css -->
+	<!-- <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css"/kccadrPb/usr/>
+	<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"/kccadrPb/usr/> -->
+	<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.css">
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css"> -->
+	<link rel="stylesheet" href="/kccadrPb/usr/css/swiper.css">
+	<link rel="stylesheet" href="/kccadrPb/usr/css/swiper.min.css">
+	<link rel="stylesheet" href="/kccadrPb/usr/css/reset.css">
+	<link rel="stylesheet" href="/kccadrPb/usr/css/font.css">
+	<link rel="stylesheet" href="/kccadrPb/usr/css/common.css">
+	<link rel="stylesheet" href="/kccadrPb/usr/css/main.css">
+
+	<!-- script -->
+	<script src="/kccadrPb/usr/script/jquery-3.5.0.js"></script>
+	<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script> -->
+	<!-- <script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
+	<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> -->
+	<!-- <script src="/kccadrPb/usr/script/swiper.js"></script> -->
+	<script src="/kccadrPb/usr/script/swiper.js"></script>
+	<script src="/kccadrPb/usr/script/swiper.min.js"></script>
+	<script src="/kccadrPb/usr/script/common.js"></script>
+	<script src="/kccadrPb/usr/script/main.js"></script>
+</head>
+
+<body>
+	<div class="skip_menu">
+		<a href="#main" class="contGo" title="본문 바로가기">본문 바로가기</a>
+	</div>
+	<!-- header -->
+	<header>
+		<div class="gnb_wrap">
+			<div class="inner">
+				<div class="site">
+					<img src="/kccadrPb/usr/image/common/gnb_logo.png" alt="한국저작권위원회">
+					<a href="https://www.copyright.or.kr/main.do" target="_blank" title="새창열림">바로가기</a>
+				</div>
+				<div class="area_right">
+					<p class="login_after">정수빈 <span>님</span></p>
+					<a href="#">로그아웃</a>
+					<a href="#">회원정보 수정</a>
+					<div class="btn_util">
+						<button class="btn_minus" title="글자 축소"></button>
+						<button class="btn_plus" title="글자 확대"></button>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="header">
+			<div class="header_inner">
+				<h1 class="logo"><a href="/kccadrPb/usr/index.html"><img src="/kccadrPb/usr/image/common/top_logo.png"
+							alt="저작권 전자조정시스템 Copyright Electronic Coordination System"></a></h1>
+				<div class="nav_wrap">
+					<nav id="menu">
+						<ul class="depth01">
+							<li class="depth01_li"><a href="#" class="menu_link">조정신청</a>
+								<ul class="depth02">
+									<li><a href="#">신청서 작성</a></li>
+								</ul>
+							</li>
+							<li class="depth01_li"><a href="#" class="menu_link">조정신청관리</a>
+								<ul class="depth02">
+									<li><a href="#">조정신청관리</a></li>
+								</ul>
+							</li>
+							<li class="depth01_li"><a href="#" class="menu_link">조정진행관리</a>
+								<ul class="depth02">
+									<li><a href="#">조정위원 조정진행</a></li>
+								</ul>
+							</li>
+							<li class="depth01_li"><a href="#" class="menu_link">나의사건확인</a>
+								<ul class="depth02">
+									<li><a href="#">신청 중 사건 조회</a></li>
+									<li><a href="#">진행 중 사건 조회</a></li>
+									<li><a href="#">비용결제</a></li>
+									<li><a href="#">공동인증서 등록</a></li>
+									<li><a href="#">조정일정현황</a></li>
+								</ul>
+							</li>
+							<li class="depth01_li"><a href="#" class="menu_link">종료사건확인</a>
+								<ul class="depth02">
+									<li><a href="#">종료 사건 조회</a></li>
+								</ul>
+							</li>
+						</ul>
+					</nav>
+				</div>
+				<div class="area_right">
+					<button type="button" class="btn_mobile btn_login" title="로그인하기"></button>
+					<!-- <button type="button" class="btn_mobile btn_logout" title="로그아웃하기"></button> -->
+					<button type="button" class="btn_mobile btn_join" title="회원가입하기"></button>
+					<!-- <button type="button" class="btn_mobile btn_usredit" title="회원정보수정하기"></button> -->
+					<!-- <button class="btn_search" title="검색영역 열기"></button> -->
+					<button class="btn_menu" title="전체메뉴 열기"></button>
+				</div>
+			</div>
+		</div>
+	</header>
+	<!-- //header -->
+
+	<!-- 전체메뉴 -->
+	<div class="full_menu">
+		<div class="inner">
+			<h1 class="logo"><img src="/kccadrPb/usr/image/common/top_logo.png"
+					alt="저작권 전자조정시스템 Copyright Electronic Coordination System"></h1>
+			<ul class="depth01">
+				<li class="depth01_li"><a href="#" class="menu_link">전자조정 안내</a>
+					<ul class="depth02">
+						<li><a href="#">조정의 개념 및 효력</a></li>
+						<li><a href="#">조정 대상</a></li>
+						<li><a href="#">조정 절차</a></li>
+						<li><a href="#">조정 비용</a></li>
+						<li><a href="#">신청안내</a></li>
+					</ul>
+				</li>
+				<li class="depth01_li"><a href="#" class="menu_link">전자조정 신청</a>
+					<ul class="depth02">
+						<li><a href="#">조정 신청</a></li>
+						<li><a href="#">간편 조정 신청</a></li>
+						<li><a href="#">조정신청 대리인 신청</a></li>
+						<li><a href="#">조정신청 취하</a></li>
+						<li><a href="#">조정 경정 신청</a></li>
+					</ul>
+				</li>
+				<li class="depth01_li"><a href="#" class="menu_link">사례/통계</a>
+					<ul class="depth02">
+						<li><a href="#">조정사건조회</a></li>
+						<li><a href="#">조정사례조회</a></li>
+						<li><a href="#">조정통계</a></li>
+					</ul>
+				</li>
+				<li class="depth01_li"><a href="#" class="menu_link">정보마당</a>
+					<ul class="depth02">
+						<li><a href="#">공지사항</a></li>
+						<li><a href="#">조정제도 안내 게시판</a></li>
+						<li><a href="#">관련법조항 게시판</a></li>
+						<li><a href="#">묻고답하기</a></li>
+					</ul>
+				</li>
+				<li class="depth01_li"><a href="https://www.copyright.or.kr/customer-center/user-guide/privacy-policy/index.do" class="menu_link" target="_blank" title="새창열림">이용안내</a>
+					<ul class="depth02">
+						<li><a href="https://www.copyright.or.kr/customer-center/user-guide/privacy-policy/index.do" target="_blank" title="새창열림">개인정보처리방침 <i class="link"></i></a></li>
+						<li><a href="https://www.copyright.or.kr/customer-center/user-guide/email-rejection/index.do" target="_blank" title="새창열림">이메일무단수집거부 <i class="link"></i></a></li>
+						<li><a href="https://www.copyright.or.kr/customer-center/user-guide/customer-service-charter/index.do" target="_blank" title="새창열림">고객서비스헌장 <i class="link"></i></a></li>
+						<li><a href="https://www.copyright.or.kr/customer-center/user-guide/policy/index.do" target="_blank" title="새창열림">저작권정책 <i class="link"></i></a></li>
+					</ul>
+				</li>
+			</ul>
+			<button class="btn_close" title="전체메뉴 닫기"></button>
+		</div>
+	</div>
+	<!-- //전체메뉴 -->
+
+	<!-- 모바일메뉴 -->
+	<div id="m_menu">
+		<ul class="depth01">
+			<li class="depth01_li"><button type="button" class="menu_tit" title="소메뉴 열기">전자조정 안내</button>
+				<ul class="depth02">
+					<li><a href="#">조정의 개념 및 효력</a></li>
+					<li><a href="#">조정 대상</a></li>
+					<li><a href="#">조정 절차</a></li>
+					<li><a href="#">조정 비용</a></li>
+					<li><a href="#">신청안내</a></li>
+				</ul>
+			</li>
+			<li class="depth01_li"><button type="button" class="menu_tit" title="소메뉴 열기">전자조정 신청</button>
+				<ul class="depth02">
+					<li><a href="#">조정 신청</a></li>
+					<li><a href="#">간편 조정 신청</a></li>
+					<li><a href="#">조정신청 대리인 신청</a></li>
+					<li><a href="#">조정신청 취하</a></li>
+					<li><a href="#">조정 경정 신청</a></li>
+				</ul>
+			</li>
+			<li class="depth01_li"><button type="button" class="menu_tit" title="소메뉴 열기">사례/통계</button>
+				<ul class="depth02">
+					<li><a href="#">조정사건조회</a></li>
+					<li><a href="#">조정사례조회</a></li>
+					<li><a href="#">조정통계</a></li>
+				</ul>
+			</li>
+			<li class="depth01_li"><button type="button" class="menu_tit" title="소메뉴 열기">정보마당</button>
+				<ul class="depth02">
+					<li><a href="#">공지사항</a></li>
+					<li><a href="#">조정제도 안내 게시판</a></li>
+					<li><a href="#">관련법조항 게시판</a></li>
+					<li><a href="#">묻고답하기</a></li>
+				</ul>
+			</li>
+			<li class="depth01_li"><button type="button" class="menu_tit" title="소메뉴 열기">마이페이지</button>
+				<ul class="depth02">
+					<li><a href="#">개인정보관리</a></li>
+					<li><a href="#">분쟁조정현황</a></li>
+					<li><a href="#">대리인정보관리</a></li>
+					<li><a href="#">분쟁조정문의</a></li>
+				</ul>
+			</li>
+			<li class="depth01_li">
+				<button type="button" class="menu_tit" title="소메뉴 열기">이용안내</button>
+				<ul class="depth02">
+					<li><a href="https://www.copyright.or.kr/customer-center/user-guide/privacy-policy/index.do" target="_blank" title="새창열림">개인정보처리방침 <i class="link"></i></a></li>
+					<li><a href="https://www.copyright.or.kr/customer-center/user-guide/email-rejection/index.do" target="_blank" title="새창열림">이메일무단수집거부 <i class="link"></i></a></li>
+					<li><a href="https://www.copyright.or.kr/customer-center/user-guide/customer-service-charter/index.do" target="_blank" title="새창열림">고객서비스헌장 <i class="link"></i></a></li>
+					<li><a href="https://www.copyright.or.kr/customer-center/user-guide/policy/index.do" target="_blank" title="새창열림">저작권정책 <i class="link"></i></a></li>
+				</ul>
+			</li>
+		</ul>
+		<button class="btn_close" title="모바일메뉴 닫기"></button>
+	</div>
+	<!-- //모바일메뉴 -->
+
+	<!-- 메인 콘텐츠 -->
+	<main class="main" id="main">
+		<!-- 메인 비주얼 -->
+		<div class="main_visual">
+			<div class="visual_wrap swiper-container">
+				<ul class="visual_list swiper-wrapper">
+					<li class="visual_img img01 swiper-slide"></li>
+					<li class="visual_img img02 swiper-slide"></li>
+					<li class="visual_img img03 swiper-slide"></li>
+				</ul>
+				<!-- <div class="visual_nav"></div> -->
+				<div class="visual_util">
+					<button class="visual_prev" title="비주얼 이미지 이전"></button>
+					<button class="visual_next" title="비주얼 이미지 다음"></button>
+				</div>
+			</div>
+			<div class="inner">
+				<div class="text_area">
+					<p>분쟁을 신속하고 공정하게 해결해주는</p>
+					<span>저작권 전자조정시스템</span>
+				</div>
+				<!-- <div class="search_area">
+					<input type="text"><button class="btn_search" title="검색"></button>
+					<div class="tag_area">
+						<a href="/">#저작권</a>
+						<a href="/">#폰트사용범위</a>
+						<a href="/">#저작권침해</a>
+						<a href="/">#만료저작물</a>
+						<a href="/">#음원저작권</a>
+					</div>
+				</div> -->
+			</div>
+		</div>
+		<!-- //메인 비주얼 -->
+
+		<!-- 바로가기 -->
+		
+		<div class="baro_cont experience_cont">
+			<div class="inner">
+				<div class="mask"></div>
+				<a href="/" title="접수 페이지 바로가기"><i></i>
+					<p>접수</p>
+					<div class="tooltip_type01">
+						<div class="text_area">
+							<p class="tooltip_tit01">
+								조정사건을 신청하는 기능<br>
+								사건 유형별, 사건정보를 등록하여 조정신청을 진행
+							</p>
+							<p class="tooltip_tit02">정보등록, 불러오기, 제출하기 기능 제공</p>
+						</div>
+						<button type="button" title="페이지 이동">전자조정 등록</button>
+					</div>
+				</a>
+				
+				<a href="/" title="기일지정 페이지 바로가기"><i></i>
+					<p>기일지정</p>
+					<div class="tooltip_type01">
+						<div class="text_area">
+							<p class="tooltip_tit01">
+								조정사건을 신청하는 기능<br>
+								사건 유형별, 사건정보를 등록하여 조정신청을 진행
+							</p>
+							<p class="tooltip_tit02">정보등록, 불러오기, 제출하기 기능 제공</p>
+						</div>
+						<button type="button" title="페이지 이동">전자조정 등록</button>
+					</div>
+				</a>
+				
+				<a href="/" title="기일개최 페이지 바로가기"><i></i>
+					<p>기일개최</p>
+					<div class="tooltip_type01">
+						<div class="text_area">
+							<p class="tooltip_tit01">
+								조정사건을 신청하는 기능<br>
+								사건 유형별, 사건정보를 등록하여 조정신청을 진행
+							</p>
+							<p class="tooltip_tit02">정보등록, 불러오기, 제출하기 기능 제공</p>
+						</div>
+						<button type="button" title="페이지 이동">전자조정 등록</button>
+					</div>
+				</a>
+				
+				<a href="/" title="조정중 페이지 바로가기"><i></i>
+					<p>조정중</p>
+					<div class="tooltip_type01">
+						<div class="text_area">
+							<p class="tooltip_tit01">
+								조정사건을 신청하는 기능<br>
+								사건 유형별, 사건정보를 등록하여 조정신청을 진행
+							</p>
+							<p class="tooltip_tit02">정보등록, 불러오기, 제출하기 기능 제공</p>
+						</div>
+						<button type="button" title="페이지 이동">전자조정 등록</button>
+					</div>
+				</a>
+				
+				<a href="/" title="종료 페이지 바로가기"><i></i>
+					<p>종료</p>
+					<div class="tooltip_type01">
+						<div class="text_area">
+							<p class="tooltip_tit01">
+								조정사건을 신청하는 기능<br>
+								사건 유형별, 사건정보를 등록하여 조정신청을 진행
+							</p>
+							<p class="tooltip_tit02">정보등록, 불러오기, 제출하기 기능 제공</p>
+						</div>
+						<button type="button" title="페이지 이동">전자조정 등록</button>
+					</div>
+				</a>
+				
+			</div>
+		</div>
+		<!-- //바로가기 -->
+		<div class="btm_cont">
+			<div class="inner">
+				<!-- 조정신청 안내 -->
+				<div class="area_info area_cont">
+					<div class="area_top">
+						<p class="tit">조정신청 안내</p>
+					</div>
+					<div class="cont">
+						<div class="bnn_cont">
+							<a href="/">
+								<i></i>
+								<span>전자조정 신청</span>
+								<p>온라인상으로 구비서류 제출 및 수수료 결제</p>
+							</a>
+							<a href="/">
+								<i></i>
+								<span>오프라인 신청</span>
+								<p>한국저작권위원회로 우편 송달 또는 방문</p>
+							</a>
+						</div>
+						<div class="area_btm">
+							<div class="tit">
+								<i></i>
+								<p>상담전화</p>
+							</div>
+							<p class="info">
+								<span>02-2669-0044</span>
+								월~금(평일) 09:00~18:00
+							</p>
+						</div>
+					</div>
+				</div>
+				<!-- //조정신청 안내 -->
+
+				<!-- 조정일정 -->
+				<div class="area_cont area_list">
+					<div class="area_top">
+						<p class="tit">조정사례</p>
+						<div class="cont_util">
+							<button class="btn_plus" title="조정사례 페이지 이동"><i></i></button>
+						</div>
+					</div>
+					<div class="cont list_cont">
+						<ul class="list">
+							<li>
+								<a href="#">
+									<p class="list_top">
+										<span class="list_tit">조정 사례 공개 안내</span>
+										<span class="list_date">2017-05-08</span>
+									</p>
+									<p class="list_info">안녕하세요 조정 사례는 실제 발생한 조정 사례를
+										기준으로 작성되고 있습니다.다만, 조정제도는...</p>
+								</a>
+							</li>
+							<li>
+								<a href="#">
+									<p class="list_top">
+										<span class="list_tit">· 조정 사례 공개 안내</span>
+										<span class="list_date">2017-05-08</span>
+									</p>
+								</a>
+							</li>
+							<li>
+								<a href="#">
+									<p class="list_top">
+										<span class="list_tit">· 조정 사례 공개 안내</span>
+										<span class="list_date">2017-05-08</span>
+									</p>
+								</a>
+							</li>
+							<li>
+								<a href="#">
+									<p class="list_top">
+										<span class="list_tit">· 조정 사례 공개 안내</span>
+										<span class="list_date">2017-05-08</span>
+									</p>
+								</a>
+							</li>
+							<li>
+								<a href="#">
+									<p class="list_top">
+										<span class="list_tit">· 조정 사례 공개 안내</span>
+										<span class="list_date">2017-05-08</span>
+									</p>
+								</a>
+							</li>
+						</ul>
+					</div>
+				</div>
+				<!-- //조정일정 -->
+
+
+				<!-- 팝업존 -->
+				<div class="area_pz area_cont">
+					<div class="area_top">
+						<p class="tit">팝업존</p>
+						<div class="cont_util">
+							<button class="btn_prev" title="이전팝업 이미지 이동"></button>
+							<button class="btn_next" title="다음팝업 이미지 이동"></button>
+							<button class="btn_ctl btn_pause" onclick="pz_ctl(this);" title="팝업존 일시정지"></button>
+						</div>
+					</div>
+					<div class="cont">
+						<div class="swiper-container pz_wrap">
+							<ul class="pz_list swiper-wrapper">
+								<li class="pz_img swiper-slide">
+									<a href="#"><img src="/kccadrPb/usr/image/main/1.jpg" alt=""></a>
+								</li>
+								<li class="pz_img swiper-slide">
+									<a href="#"><img src="/kccadrPb/usr/image/main/2.png" alt=""></a>
+								</li>
+								<li class="pz_img swiper-slide">
+									<a href="#"><img src="/kccadrPb/usr/image/main/1.jpg" alt=""></a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+				<!-- //팝업존 -->
+			</div>
+		</div>
+	</main>
+	<!-- 메인 콘텐츠 -->
+
+	<!-- footer -->
+	<footer>
+		<div class="inner">
+			<div class="area_top">
+				<ul class="site">
+					<li><a href="/">개인정보처리방침</a></li>
+					<li><a href="/">이메일무단수집거부</a></li>
+					<li><a href="/">고객서비스헌장</a></li>
+					<li><a href="/">저작권정책</a></li>
+				</ul>
+				<div class="site_go">
+					<label for="site_select">관련사이트 선택</label>
+					<select name="" id="site_select">
+						<option value="">관련사이트 바로가기</option>
+					</select>
+					<button class="btn_go" title="사이트 이동">GO</button>
+				</div>
+			</div>
+			<h1 class="logo"><a href="/kccadrPb/usr/index.html"><img src="/kccadrPb/usr/image/common/footer_logo.png"
+						alt="저작권 전자조정시스템 Copyright Electronic Coordination System"></a></h1>
+			<address>
+				<p>진주 [52852] 경상남도 진주시 충의로 19, 1/2/5층 ☎ 대표번호 055.792.0000</p>
+				<p>서울 [04323] 서울특별시 용산구 후암로 107, 5/16층 ☎ 대표번호 02.2669.0010</p>
+			</address>
+		</div>
+	</footer>
+	<!-- //footer -->
+</body>
+
+</html>

src/main/webapp/kccadrPb/usr/script/main.js

@@ -21,6 +21,22 @@ $(document).ready(function () {
 		$(".sch.swiper-slide.swiper-slide-active a").attr("tabIndex", "0");
 	});
 	/* //조정일정 스케줄 웹접근성 */
+	
+	$(".baro_cont a").mouseover(function(){
+		if($(this).siblings().is("on") == false){
+			$(this).addClass("on");
+			$(".mask").show();
+			$(this).children(".tooltip_type01").show();
+			$(this).siblings().removeClass("on");
+			$(this).next().siblings(".tooltip_type01").hide()
+		}else{}
+	});
+
+	$(".tooltip_type01").mouseleave(function(){
+		$(".tooltip_type01").hide();
+		$(".mask").hide();
+		$(".baro_cont a").removeClass("on");
+	});
 });
 
 function main_visual() {