Merge branch 'sub'

src/main/webapp/kccadrPb/tutorial/css/reset.css

@@ -0,0 +1,43 @@
+html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;color: inherit;font-weight: inherit;font-family: 'Noto Sans KR', sans-serif;}
+article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display: block; font-family: 'Noto Sans KR', sans-serif; margin: 0; padding: 0; border: 0; font-size: 100%;}
+body {line-height: 1;}
+ol,ul,li {list-style: none;}
+p, h1, h2, h3, h4, h5, h6 {margin: 0; padding: 0;}
+a {color: inherit; text-decoration: none; display: block;}
+a:focus:active:hover{outline: 0}
+img {font-size: 0; vertical-align: middle; border: 0;}
+table {border-collapse: collapse; border-spacing: 0;}
+select, input {vertical-align: middle;}
+caption,label,.label{width: 1px; height: 1px; margin: 0; border: none; clip: rect(0,0,0,0); overflow: hidden;}
+label{position: absolute;}
+/* 안드로이드 및 아이폰에서 기본적으로 적용되어있는 select, input css 제거. */
+select {background-color: #fff; appearance: none; -webkit-appearance: none; -moz-appearance: none;}
+select::-ms-expand {display: none;}
+button,html input[type="button"],input[type="reset"],input[type="submit"] {-webkit-appearance: button; cursor: pointer; *overflow: visible; font-family: 'Noto Sans KR', sans-serif;}
+button[disabled],html input[disabled] {cursor: default;}
+/* ie 하위버전 기본적으로 적용되어 있는 css 변경 */
+input[type="checkbox"],input[type="radio"] {box-sizing: border-box; padding: 0; *height: 13px; *width: 13px;}
+/* 아이폰 기본적으로 적용되어 있는 버튼 css 변경 */
+input{-webkit-appearance: button;}
+/* 사파리5, 크롬에서 기본적으로 적용되어 있는 css 변경 */
+input[type="search"] {-webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box;}
+input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}
+address, em, i {font-style: normal;}
+button {border: 0; background: none; cursor: pointer;}
+hr {margin: 0; border: none; padding: 0; display: block;}
+figure, figcaption {margin: 0; padding: 0;}
+form, fieldset {border: none; margin: 0; padding: 0; line-height: 1;}
+input[type="submit"] {-webkit-appearance: none; -moz-appearance: none; appearance: none;}
+header, footer, article, section, aside, nav, main {display: block;}
+textarea{color: #666;font-size: 20px;font-weight: 300; font-family: 'Noto Sans KR', sans-serif;}
+
+input::placeholder,input[type="text"]::placeholder,input[type="password"]::placeholder,input[type="text"]:-ms-input-placeholder,input[type="password"]:-ms-input-placeholder{color: #666 !important; font-size: 16px !important;}
+input[type="text"]:focus::placeholder,input[type="password"]:focus::placeholder{color: transparent;}
+
+input:disabled,input[disabled="disabled"],input:read-only,input[readonly="readonly"]{background-color: #eee !important; color: #aaa !important; font-size: 16px;}
+button:disabled,button[disabled="disabled"]{background-color: #eee !important; color: #aaa !important; border: none !important;}
+select:disabled,select[disabled="disabled"]{background-color: #eee !important; color: #aaa !important; border: none !important;}
+
+/* a:hover, a:active,a:hover:active { outline: none; }
+a:focus:not(:focus) {outline: none;}
+a:focus:not(:focus-visible){outline: none;} */

src/main/webapp/kccadrPb/tutorial/css/tutorial.css

@@ -0,0 +1,4 @@
+body{position: relative; width: 100%; height: 100%;}
+.tutorial{width: 100%; height: 100%; overflow-x: hidden;}
+.mask{position: absolute; display: flex; width: 100%; height: 100%; left: 0; top: 0;}
+.left_mask,.right_mask{width: 50%; height: 100%; background-color: transparent;}

src/main/webapp/kccadrPb/tutorial/tutorial.html

@@ -0,0 +1,145 @@
+<!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="/kccadrPb/tutorial/css/reset.css">
+	<link rel="stylesheet" href="/kccadrPb/tutorial/css/tutorial.css">
+
+	<!-- script -->
+	<script src="/kccadrPb/tutorial/script/jquery-3.5.0.js"></script>
+	<script type="text/javascript">
+		$(document).ready(function(){
+
+			$(".left_mask").click(function(){
+				var imgSrc = $("img").prop("src");
+				if(imgSrc.indexOf("19.gif") > -1){
+					$("img").attr("src","/kccadrPb/tutorial/image/18.gif");
+					$("body,html").animate({scrollTop : 600}, 400);
+				}else if(imgSrc.indexOf("18.gif") > -1){
+					$("img").attr("src","/kccadrPb/tutorial/image/17.gif");
+					$("body,html").animate({scrollTop : 400}, 400);
+				}else if(imgSrc.indexOf("17.gif") > -1){
+					$("img").attr("src","/kccadrPb/tutorial/image/16.gif");
+					$("body,html").animate({scrollTop : 400}, 400);
+				}else if(imgSrc.indexOf("16.gif") > -1){
+					$("img").attr("src","/kccadrPb/tutorial/image/15.gif");
+					$("body,html").animate({scrollTop : 300}, 400);
+				}else if(imgSrc.indexOf("15.gif") > -1){
+					$("img").attr("src","/kccadrPb/tutorial/image/14.gif");
+					$("body,html").animate({scrollTop : 600}, 400);
+				}else if(imgSrc.indexOf("14.gif") > -1){
+					$("img").attr("src","/kccadrPb/tutorial/image/13.gif");
+					$("body,html").animate({scrollTop : 400}, 400);
+				}else if(imgSrc.indexOf("13.gif") > -1){
+					$("img").attr("src","/kccadrPb/tutorial/image/12.gif");
+					$("body,html").animate({scrollTop : 550}, 400);
+				}else if(imgSrc.indexOf("12.gif") > -1){
+					$("img").attr("src","/kccadrPb/tutorial/image/11.gif");
+					$("body,html").animate({scrollTop : 400}, 400);
+				}else if(imgSrc.indexOf("11.gif") > -1){
+					$("img").attr("src","/kccadrPb/tutorial/image/10.gif");
+					$("body,html").animate({scrollTop : 0}, 400);
+				}else if(imgSrc.indexOf("10.gif") > -1){
+					$("img").attr("src","/kccadrPb/tutorial/image/09.gif");
+					$("body,html").animate({scrollTop : 0}, 400);
+				}else if(imgSrc.indexOf("09.gif") > -1){
+					$("img").attr("src","/kccadrPb/tutorial/image/08.gif");
+					$("body,html").animate({scrollTop : 600}, 400);
+				}else if(imgSrc.indexOf("08.gif") > -1){
+					$("img").attr("src","/kccadrPb/tutorial/image/07.gif");
+					$("body,html").animate({scrollTop : 400}, 400);
+				}else if(imgSrc.indexOf("07.gif") > -1){
+					$("img").attr("src","/kccadrPb/tutorial/image/06.gif");
+					$("body,html").animate({scrollTop : 400}, 400);
+				}else if(imgSrc.indexOf("06.gif") > -1){
+					$("img").attr("src","/kccadrPb/tutorial/image/05.gif");
+				}else if(imgSrc.indexOf("05.gif") > -1){
+					$("img").attr("src","/kccadrPb/tutorial/image/04.gif");
+					$("body,html").animate({scrollTop : 0}, 400);
+				}else if(imgSrc.indexOf("04.gif") > -1){
+					$("img").attr("src","/kccadrPb/tutorial/image/03.gif");
+					$("body,html").animate({scrollTop : 400}, 400);
+				}else if(imgSrc.indexOf("03.gif") > -1){
+					$("img").attr("src","/kccadrPb/tutorial/image/02.gif");
+				}else if(imgSrc.indexOf("02.gif") > -1){
+					$("img").attr("src","/kccadrPb/tutorial/image/01.gif");
+					$("body,html").animate({scrollTop : 0}, 400);
+				}
+			});
+
+			$(".right_mask").click(function(){
+				var imgSrc = $("img").prop("src");
+				if(imgSrc.indexOf("01.gif") > -1){
+					$("img").attr("src","/kccadrPb/tutorial/image/02.gif");
+					$("body,html").animate({scrollTop : 400}, 400);
+				}else if(imgSrc.indexOf("02.gif") > -1){
+					$("img").attr("src","/kccadrPb/tutorial/image/03.gif");
+				}else if(imgSrc.indexOf("03.gif") > -1){
+					$("img").attr("src","/kccadrPb/tutorial/image/04.gif");
+					$("body,html").animate({scrollTop : 0}, 400);
+				}else if(imgSrc.indexOf("04.gif") > -1){
+					$("img").attr("src","/kccadrPb/tutorial/image/05.gif");
+					$("body,html").animate({scrollTop : 400}, 400);
+				}else if(imgSrc.indexOf("05.gif") > -1){
+					$("img").attr("src","/kccadrPb/tutorial/image/06.gif");
+					$("body,html").animate({scrollTop : 400}, 400);
+				}else if(imgSrc.indexOf("06.gif") > -1){
+					$("img").attr("src","/kccadrPb/tutorial/image/07.gif");
+					$("body,html").animate({scrollTop : 400}, 400);
+				}else if(imgSrc.indexOf("07.gif") > -1){
+					$("img").attr("src","/kccadrPb/tutorial/image/08.gif");
+					$("body,html").animate({scrollTop : 600}, 400);
+				}else if(imgSrc.indexOf("08.gif") > -1){
+					$("img").attr("src","/kccadrPb/tutorial/image/09.gif");
+					$("body,html").animate({scrollTop : 0}, 400);
+				}else if(imgSrc.indexOf("09.gif") > -1){
+					$("img").attr("src","/kccadrPb/tutorial/image/10.gif");
+					$("body,html").animate({scrollTop : 0}, 400);
+				}else if(imgSrc.indexOf("10.gif") > -1){
+					$("img").attr("src","/kccadrPb/tutorial/image/11.gif");
+					$("body,html").animate({scrollTop : 400}, 400);
+				}else if(imgSrc.indexOf("11.gif") > -1){
+					$("img").attr("src","/kccadrPb/tutorial/image/12.gif");
+					$("body,html").animate({scrollTop : 500}, 400);
+				}else if(imgSrc.indexOf("12.gif") > -1){
+					$("img").attr("src","/kccadrPb/tutorial/image/13.gif");
+					$("body,html").animate({scrollTop : 500}, 400);
+				}else if(imgSrc.indexOf("13.gif") > -1){
+					$("img").attr("src","/kccadrPb/tutorial/image/14.gif");
+					$("body,html").animate({scrollTop : 600}, 400);
+				}else if(imgSrc.indexOf("14.gif") > -1){
+					$("img").attr("src","/kccadrPb/tutorial/image/15.gif");
+					$("body,html").animate({scrollTop : 300}, 400);
+				}else if(imgSrc.indexOf("15.gif") > -1){
+					$("img").attr("src","/kccadrPb/tutorial/image/16.gif");
+					$("body,html").animate({scrollTop : 400}, 400);
+				}else if(imgSrc.indexOf("16.gif") > -1){
+					$("img").attr("src","/kccadrPb/tutorial/image/17.gif");
+					$("body,html").animate({scrollTop : 400}, 400);
+				}else if(imgSrc.indexOf("17.gif") > -1){
+					$("img").attr("src","/kccadrPb/tutorial/image/18.gif");
+					$("body,html").animate({scrollTop : 600}, 400);
+				}else if(imgSrc.indexOf("18.gif") > -1){
+					$("img").attr("src","/kccadrPb/tutorial/image/19.gif");
+					$("body,html").animate({scrollTop : 300}, 400);
+				}
+				
+			});
+		})
+	</script>
+</head>
+<body>
+	<div class="mask">
+		<div class="left_mask"></div>
+		<div class="right_mask"></div>
+	</div>
+	<div class="tutorial">
+		<img src="/kccadrPb/tutorial/image/01.gif" alt="">
+	</div>
+</body>
+</html>

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

@@ -46,6 +46,7 @@
 					<li><a href="/kccadrPb/usr/index2.html">메인 체험하기(수정 9.15)</a></li>
 					<li><a href="/kccadrPb/usr/sub02_1_04.html">신청취지/원인 (수정 9.15)</a></li>
 					<li><a href="/kccadrPb/usr/workflow.html">조정진행 워크플로우 (9.19)</a></li>
+					<li><a href="/kccadrPb/tutorial/tutorial.html">튜토리얼 (9.27)</a></li>
 				</ul>
 				<p class="menu_tit">남은내역</p>
 				<div class="menu">