diff --git a/src/main/webapp/kccadrPb/tutorial/css/tutorial.css b/src/main/webapp/kccadrPb/tutorial/css/tutorial.css
index de288dbb..592d3709 100644
--- a/src/main/webapp/kccadrPb/tutorial/css/tutorial.css
+++ b/src/main/webapp/kccadrPb/tutorial/css/tutorial.css
@@ -2,7 +2,10 @@ body{position: relative; width: 100%; height: 100%;}
.tutorial{width: 100%; height: 100%; overflow-x: hidden;}
.tutorial img{position: absolute;width:100%; left: 50%;top: 0;transform: translateX(-50%);}
.mask{position: fixed; display: flex; width: 100%; height: 100%; left: 0; top: 0; z-index: 5;}
-.left_mask,.right_mask{width: 50%; height: 100%; background-color: transparent;}
+.left_mask,.right_mask{width: 50%; height: 100%; background-color: transparent; background-repeat: no-repeat;}
+.left_mask{background-image: url(/kccadrPb/tutorial/image/prev_btn.png); background-position: 10% center;}
+.left_mask.first,.right_mask.last{background-image: none;}
+.right_mask{background-image: url(/kccadrPb/tutorial/image/next_btn.png);background-position: 90% center;}
@media all and (max-width: 1800px){
.tutorial img{width: 100%; min-width: 1680px;}
}
\ No newline at end of file
diff --git a/src/main/webapp/kccadrPb/tutorial/image/01.gif b/src/main/webapp/kccadrPb/tutorial/image/01.gif
index f34ada83..448c21f7 100644
Binary files a/src/main/webapp/kccadrPb/tutorial/image/01.gif and b/src/main/webapp/kccadrPb/tutorial/image/01.gif differ
diff --git a/src/main/webapp/kccadrPb/tutorial/image/02.gif b/src/main/webapp/kccadrPb/tutorial/image/02.gif
index 3bf983eb..f81db992 100644
Binary files a/src/main/webapp/kccadrPb/tutorial/image/02.gif and b/src/main/webapp/kccadrPb/tutorial/image/02.gif differ
diff --git a/src/main/webapp/kccadrPb/tutorial/image/03.gif b/src/main/webapp/kccadrPb/tutorial/image/03.gif
index 9da5fecf..4f5a213f 100644
Binary files a/src/main/webapp/kccadrPb/tutorial/image/03.gif and b/src/main/webapp/kccadrPb/tutorial/image/03.gif differ
diff --git a/src/main/webapp/kccadrPb/tutorial/image/next_btn.png b/src/main/webapp/kccadrPb/tutorial/image/next_btn.png
new file mode 100644
index 00000000..2f5a416a
Binary files /dev/null and b/src/main/webapp/kccadrPb/tutorial/image/next_btn.png differ
diff --git a/src/main/webapp/kccadrPb/tutorial/image/prev_btn.png b/src/main/webapp/kccadrPb/tutorial/image/prev_btn.png
new file mode 100644
index 00000000..99fb3d35
Binary files /dev/null and b/src/main/webapp/kccadrPb/tutorial/image/prev_btn.png differ
diff --git a/src/main/webapp/kccadrPb/tutorial/tutorial.html b/src/main/webapp/kccadrPb/tutorial/tutorial.html
index 5c8eb00f..1dc21694 100644
--- a/src/main/webapp/kccadrPb/tutorial/tutorial.html
+++ b/src/main/webapp/kccadrPb/tutorial/tutorial.html
@@ -20,6 +20,7 @@
if(imgSrc.indexOf("19.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/18.gif");
$("body,html").animate({scrollTop : 600}, 400);
+ $(".right_mask").removeClass("last");
}else if(imgSrc.indexOf("18.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/17.gif");
$("body,html").animate({scrollTop : 400}, 400);
@@ -69,6 +70,7 @@
}else if(imgSrc.indexOf("02.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/01.gif");
$("body,html").animate({scrollTop : 0}, 400);
+ $(".left_mask").addClass("first");
}
});
@@ -77,6 +79,7 @@
if(imgSrc.indexOf("01.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/02.gif");
$("body,html").animate({scrollTop : 400}, 400);
+ $(".left_mask").removeClass("first");
}else if(imgSrc.indexOf("02.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/03.gif");
}else if(imgSrc.indexOf("03.gif") > -1){
@@ -127,6 +130,7 @@
}else if(imgSrc.indexOf("18.gif") > -1){
$("img").attr("src","/kccadrPb/tutorial/image/19.gif");
$("body,html").animate({scrollTop : 300}, 400);
+ $(".right_mask").addClass("last");
}
});
@@ -135,7 +139,7 @@