Index: vue/src/assets/images/devops/DevSupport/github.png
===================================================================
diff -u -r3485de532de3b82aceaaa966521ce34a4469a9cd -r9b9bc0758ca36439391fec3b56dab0049222ee4e
--- vue/src/assets/images/devops/DevSupport/github.png	(.../github.png)	(revision 3485de532de3b82aceaaa966521ce34a4469a9cd)
+++ vue/src/assets/images/devops/DevSupport/github.png	(.../github.png)	(revision 9b9bc0758ca36439391fec3b56dab0049222ee4e)
@@ -1740,7 +1740,6 @@
 	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
 
-
 .tools[data-v-5f164deb] {
 	width: 80px;
 	height: 80px;
@@ -1749,7 +1748,7 @@
 	margin: 10px 10px 10px 10px;
 	border-radius: 10px;
 	background-color: #ddd;
-	box-shadow: 5px 5px 5px rgba(0,0,0,.301);
+	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.301);
 }
 
 .tools span[data-v-5f164deb] {
@@ -1773,169 +1772,278 @@
 	white-space: nowrap;
 }
 
-
 [data-v-35dc3539] {
-	box-sizing: border-box
+	box-sizing: border-box;
 }
 
-a[data-v-35dc3539],abbr[data-v-35dc3539],acronym[data-v-35dc3539],address[data-v-35dc3539],applet[data-v-35dc3539],article[data-v-35dc3539],aside[data-v-35dc3539],audio[data-v-35dc3539],b[data-v-35dc3539],big[data-v-35dc3539],blockquote[data-v-35dc3539],body[data-v-35dc3539],canvas[data-v-35dc3539],caption[data-v-35dc3539],center[data-v-35dc3539],cite[data-v-35dc3539],code[data-v-35dc3539],dd[data-v-35dc3539],del[data-v-35dc3539],details[data-v-35dc3539],dfn[data-v-35dc3539],div[data-v-35dc3539],dl[data-v-35dc3539],dt[data-v-35dc3539],em[data-v-35dc3539],embed[data-v-35dc3539],fieldset[data-v-35dc3539],figcaption[data-v-35dc3539],figure[data-v-35dc3539],footer[data-v-35dc3539],form[data-v-35dc3539],h1[data-v-35dc3539],h2[data-v-35dc3539],h3[data-v-35dc3539],h4[data-v-35dc3539],h5[data-v-35dc3539],h6[data-v-35dc3539],header[data-v-35dc3539],hgroup[data-v-35dc3539],html[data-v-35dc3539],i[data-v-35dc3539],iframe[data-v-35dc3539],img[data-v-35dc3539],ins[data-v-35dc3539],kbd[data-v-35dc3539],label[data-v-35dc3539],legend[data-v-35dc3539],li[data-v-35dc3539],mark[data-v-35dc3539],menu[data-v-35dc3539],nav[data-v-35dc3539],object[data-v-35dc3539],ol[data-v-35dc3539],output[data-v-35dc3539],p[data-v-35dc3539],pre[data-v-35dc3539],q[data-v-35dc3539],ruby[data-v-35dc3539],s[data-v-35dc3539],samp[data-v-35dc3539],section[data-v-35dc3539],small[data-v-35dc3539],span[data-v-35dc3539],strike[data-v-35dc3539],strong[data-v-35dc3539],summary[data-v-35dc3539],table[data-v-35dc3539],tbody[data-v-35dc3539],td[data-v-35dc3539],tfoot[data-v-35dc3539],th[data-v-35dc3539],thead[data-v-35dc3539],time[data-v-35dc3539],tr[data-v-35dc3539],tt[data-v-35dc3539],u[data-v-35dc3539],ul[data-v-35dc3539],var[data-v-35dc3539],video[data-v-35dc3539] {
+a[data-v-35dc3539],
+abbr[data-v-35dc3539],
+acronym[data-v-35dc3539],
+address[data-v-35dc3539],
+applet[data-v-35dc3539],
+article[data-v-35dc3539],
+aside[data-v-35dc3539],
+audio[data-v-35dc3539],
+b[data-v-35dc3539],
+big[data-v-35dc3539],
+blockquote[data-v-35dc3539],
+body[data-v-35dc3539],
+canvas[data-v-35dc3539],
+caption[data-v-35dc3539],
+center[data-v-35dc3539],
+cite[data-v-35dc3539],
+code[data-v-35dc3539],
+dd[data-v-35dc3539],
+del[data-v-35dc3539],
+details[data-v-35dc3539],
+dfn[data-v-35dc3539],
+div[data-v-35dc3539],
+dl[data-v-35dc3539],
+dt[data-v-35dc3539],
+em[data-v-35dc3539],
+embed[data-v-35dc3539],
+fieldset[data-v-35dc3539],
+figcaption[data-v-35dc3539],
+figure[data-v-35dc3539],
+footer[data-v-35dc3539],
+form[data-v-35dc3539],
+h1[data-v-35dc3539],
+h2[data-v-35dc3539],
+h3[data-v-35dc3539],
+h4[data-v-35dc3539],
+h5[data-v-35dc3539],
+h6[data-v-35dc3539],
+header[data-v-35dc3539],
+hgroup[data-v-35dc3539],
+html[data-v-35dc3539],
+i[data-v-35dc3539],
+iframe[data-v-35dc3539],
+img[data-v-35dc3539],
+ins[data-v-35dc3539],
+kbd[data-v-35dc3539],
+label[data-v-35dc3539],
+legend[data-v-35dc3539],
+li[data-v-35dc3539],
+mark[data-v-35dc3539],
+menu[data-v-35dc3539],
+nav[data-v-35dc3539],
+object[data-v-35dc3539],
+ol[data-v-35dc3539],
+output[data-v-35dc3539],
+p[data-v-35dc3539],
+pre[data-v-35dc3539],
+q[data-v-35dc3539],
+ruby[data-v-35dc3539],
+s[data-v-35dc3539],
+samp[data-v-35dc3539],
+section[data-v-35dc3539],
+small[data-v-35dc3539],
+span[data-v-35dc3539],
+strike[data-v-35dc3539],
+strong[data-v-35dc3539],
+summary[data-v-35dc3539],
+table[data-v-35dc3539],
+tbody[data-v-35dc3539],
+td[data-v-35dc3539],
+tfoot[data-v-35dc3539],
+th[data-v-35dc3539],
+thead[data-v-35dc3539],
+time[data-v-35dc3539],
+tr[data-v-35dc3539],
+tt[data-v-35dc3539],
+u[data-v-35dc3539],
+ul[data-v-35dc3539],
+var[data-v-35dc3539],
+video[data-v-35dc3539] {
 	margin: 0;
 	padding: 0;
 	font-size: 12px;
-	vertical-align: baseline
+	vertical-align: baseline;
 }
 
-button[data-v-35dc3539],input[data-v-35dc3539],select[data-v-35dc3539],textarea[data-v-35dc3539] {
+button[data-v-35dc3539],
+input[data-v-35dc3539],
+select[data-v-35dc3539],
+textarea[data-v-35dc3539] {
 	font-size: 100%;
 	margin: 0;
-	vertical-align: baseline
+	vertical-align: baseline;
 }
 
-button[data-v-35dc3539],input[data-v-35dc3539] {
-	line-height: normal
+button[data-v-35dc3539],
+input[data-v-35dc3539] {
+	line-height: normal;
 }
 
 [data-v-35dc3539]:focus {
-	outline: 0
+	outline: 0;
 }
 
-article[data-v-35dc3539],aside[data-v-35dc3539],details[data-v-35dc3539],figcaption[data-v-35dc3539],figure[data-v-35dc3539],footer[data-v-35dc3539],header[data-v-35dc3539],hgroup[data-v-35dc3539],menu[data-v-35dc3539],nav[data-v-35dc3539],section[data-v-35dc3539] {
-	display: block
+article[data-v-35dc3539],
+aside[data-v-35dc3539],
+details[data-v-35dc3539],
+figcaption[data-v-35dc3539],
+figure[data-v-35dc3539],
+footer[data-v-35dc3539],
+header[data-v-35dc3539],
+hgroup[data-v-35dc3539],
+menu[data-v-35dc3539],
+nav[data-v-35dc3539],
+section[data-v-35dc3539] {
+	display: block;
 }
 
 body[data-v-35dc3539] {
-	line-height: 1
+	line-height: 1;
 }
 
-li[data-v-35dc3539],ol[data-v-35dc3539],ul[data-v-35dc3539] {
-	list-style: none
+li[data-v-35dc3539],
+ol[data-v-35dc3539],
+ul[data-v-35dc3539] {
+	list-style: none;
 }
 
 li[data-v-35dc3539] {
-	display: list-item
+	display: list-item;
 }
 
 table[data-v-35dc3539] {
 	display: table;
 	border-collapse: collapse;
-	border-spacing: 0
+	border-spacing: 0;
 }
 
 tr[data-v-35dc3539] {
-	display: table-row
+	display: table-row;
 }
 
 thead[data-v-35dc3539] {
-	display: table-header-group
+	display: table-header-group;
 }
 
 tbody[data-v-35dc3539] {
-	display: table-row-group
+	display: table-row-group;
 }
 
 tfoot[data-v-35dc3539] {
-	display: table-footer-group
+	display: table-footer-group;
 }
 
 col[data-v-35dc3539] {
-	display: table-column
+	display: table-column;
 }
 
 colgroup[data-v-35dc3539] {
-	display: table-column-group
+	display: table-column-group;
 }
 
-td[data-v-35dc3539],th[data-v-35dc3539] {
-	display: table-cell
+td[data-v-35dc3539],
+th[data-v-35dc3539] {
+	display: table-cell;
 }
 
 caption[data-v-35dc3539] {
-	display: table-caption
+	display: table-caption;
 }
 
 th[data-v-35dc3539] {
 	font-weight: bolder;
-	text-align: center
+	text-align: center;
 }
 
 caption[data-v-35dc3539] {
-	text-align: center
+	text-align: center;
 }
 
 textarea[data-v-35dc3539] {
 	overflow: auto;
 	vertical-align: top;
-	resize: vertical
+	resize: vertical;
 }
 
-sub[data-v-35dc3539],sup[data-v-35dc3539] {
-	font-size: 75%
+sub[data-v-35dc3539],
+sup[data-v-35dc3539] {
+	font-size: 75%;
 }
 
 sup[data-v-35dc3539] {
-	vertical-align: revert
+	vertical-align: revert;
 }
 
 sub[data-v-35dc3539] {
-	vertical-align: initial
+	vertical-align: initial;
 }
 
 small[data-v-35dc3539] {
-	font-size: 80%
+	font-size: 80%;
 }
 
 a[data-v-35dc3539] {
 	text-decoration: none;
-	color: inherit
+	color: inherit;
 }
 
-a[data-v-35dc3539]:active,a[data-v-35dc3539]:focus,a[data-v-35dc3539]:hover {
-	outline: 0
+a[data-v-35dc3539]:active,
+a[data-v-35dc3539]:focus,
+a[data-v-35dc3539]:hover {
+	outline: 0;
 }
 
 img[data-v-35dc3539] {
 	margin: 0;
 	padding: 0;
-	border: 0
+	border: 0;
 }
 
-h1[data-v-35dc3539],h2[data-v-35dc3539],h3[data-v-35dc3539],h4[data-v-35dc3539],h5[data-v-35dc3539],h6[data-v-35dc3539] {
+h1[data-v-35dc3539],
+h2[data-v-35dc3539],
+h3[data-v-35dc3539],
+h4[data-v-35dc3539],
+h5[data-v-35dc3539],
+h6[data-v-35dc3539] {
 	margin: 10px 0;
-	line-height: 20px
+	line-height: 20px;
 }
 
-BDO[DIR=ltr][data-v-35dc3539] {
+BDO[DIR="ltr"][data-v-35dc3539] {
 	direction: ltr;
-	unicode-bidi: bidi-override
+	unicode-bidi: bidi-override;
 }
 
-BDO[DIR=rtl][data-v-35dc3539] {
+BDO[DIR="rtl"][data-v-35dc3539] {
 	direction: rtl;
-	unicode-bidi: bidi-override
+	unicode-bidi: bidi-override;
 }
 
-[DIR=ltr][data-v-35dc3539] {
+[DIR="ltr"][data-v-35dc3539] {
 	direction: ltr;
-	unicode-bidi: embed
+	unicode-bidi: embed;
 }
 
-[DIR=rtl][data-v-35dc3539] {
+[DIR="rtl"][data-v-35dc3539] {
 	direction: rtl;
-	unicode-bidi: embed
+	unicode-bidi: embed;
 }
 
 @media print {
 	h1[data-v-35dc3539] {
-		page-break-before: always
+		page-break-before: always;
 	}
 
-	h1[data-v-35dc3539],h2[data-v-35dc3539],h3[data-v-35dc3539],h4[data-v-35dc3539],h5[data-v-35dc3539],h6[data-v-35dc3539] {
+	h1[data-v-35dc3539],
+	h2[data-v-35dc3539],
+	h3[data-v-35dc3539],
+	h4[data-v-35dc3539],
+	h5[data-v-35dc3539],
+	h6[data-v-35dc3539] {
 		font-size: inherit;
-		page-break-after: avoid
+		page-break-after: avoid;
 	}
 
-	dl[data-v-35dc3539],ol[data-v-35dc3539],ul[data-v-35dc3539] {
-		page-break-before: avoid
+	dl[data-v-35dc3539],
+	ol[data-v-35dc3539],
+	ul[data-v-35dc3539] {
+		page-break-before: avoid;
 	}
 }
 
@@ -1945,25 +2053,38 @@
 	font-weight: 400;
 	line-height: 20px;
 	color: #f8f8f8;
-	font-family: Pretendard,-apple-system,BlinkMacSystemFont,system-ui,Roboto,Helvetica Neue,Segoe UI,Apple SD Gothic Neo,Noto Sans KR,Malgun Gothic,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,sans-serif;
-	background: radial-gradient(farthest-side ellipse at 10% 0,rgba(40,40,40,.9),rgba(90,100,130,.89),rgba(60,60,60,.9)),url(/313devgrp/vue/dist/assets/img/bgnoise_lg_dark.b70fafc8.png)
+	font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI,
+		Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, sans-serif;
+	background: radial-gradient(
+			farthest-side ellipse at 10% 0,
+			rgba(40, 40, 40, 0.9),
+			rgba(90, 100, 130, 0.89),
+			rgba(60, 60, 60, 0.9)
+		),
+		url(/313devgrp/vue/dist/assets/img/bgnoise_lg_dark.b70fafc8.png);
 }
 
 p[data-v-35dc3539] {
-	margin: 0 0 10px
+	margin: 0 0 10px;
 }
 
-.clearfix[data-v-35dc3539]:after,.clearfix[data-v-35dc3539]:before {
-	*zoom:1}
+.clearfix[data-v-35dc3539]:after,
+.clearfix[data-v-35dc3539]:before {
+	*zoom: 1;
+}
 
-.clearfix[data-v-35dc3539]:after:after,.clearfix[data-v-35dc3539]:after:before,.clearfix[data-v-35dc3539]:before:after,.clearfix[data-v-35dc3539]:before:before {
+.clearfix[data-v-35dc3539]:after:after,
+.clearfix[data-v-35dc3539]:after:before,
+.clearfix[data-v-35dc3539]:before:after,
+.clearfix[data-v-35dc3539]:before:before {
 	display: block;
 	content: "";
-	line-height: 0
+	line-height: 0;
 }
 
-.clearfix[data-v-35dc3539]:after:after,.clearfix[data-v-35dc3539]:before:after {
-	clear: both
+.clearfix[data-v-35dc3539]:after:after,
+.clearfix[data-v-35dc3539]:before:after {
+	clear: both;
 }
 
 .btn[data-v-35dc3539] {
@@ -1982,70 +2103,70 @@
 	border-radius: 1px;
 	-webkit-user-select: none;
 	-moz-user-select: none;
-	user-select: none
+	user-select: none;
 }
 
 .btn-transparent[data-v-35dc3539] {
-	background: rgba(51,51,51,.4);
+	background: rgba(51, 51, 51, 0.4);
 	color: #fff;
 	text-shadow: none;
-	box-shadow: none
+	box-shadow: none;
 }
 
 .btn-white[data-v-35dc3539] {
 	background: none;
 	border: 2px solid #fff;
-	border-radius: 2px
+	border-radius: 2px;
 }
 
 .btn-lg[data-v-35dc3539] {
 	padding: 8px 18px;
 	font-size: 16.25px;
-	line-height: 1.33
+	line-height: 1.33;
 }
 
 .content-wrap[data-v-35dc3539] {
-	margin: 57px 0 0 200px
+	margin: 57px 0 0 200px;
 }
 
 .conainer[data-v-35dc3539] {
 	position: relative;
 	padding: 30px 2.5641%;
-	transition: margin-top .35s ease,opacity .2s;
+	transition: margin-top 0.35s ease, opacity 0.2s;
 	max-width: none;
 	width: auto;
 	opacity: 1;
-	color: #fff
+	color: #fff;
 }
 
 .content-section[data-v-35dc3539] {
-	background: rgba(51,51,51,.425);
-	padding: 20px
+	background: rgba(51, 51, 51, 0.425);
+	padding: 20px;
 }
 
 .blue-text[data-v-35dc3539] {
-	color: #3c8dbc
+	color: #3c8dbc;
 }
 
-@media(min-width: 1200px) {
+@media (min-width: 1200px) {
 	.container[data-v-35dc3539] {
-		width:1170px
+		width: 1170px;
 	}
 }
 
-@media(min-width: 992px)and (max-width:1199px) {
+@media (min-width: 992px) and (max-width: 1199px) {
 	.container[data-v-35dc3539] {
-		width:970px
+		width: 970px;
 	}
 }
 
-@media(min-width: 280px)and (max-width:991px) {
+@media (min-width: 280px) and (max-width: 991px) {
 	.container[data-v-35dc3539] {
-		width:750px
+		width: 750px;
 	}
 
 	.content-wrap[data-v-35dc3539] {
-		margin: 57px 0 0 0
+		margin: 57px 0 0 0;
 	}
 }
 
@@ -2055,81 +2176,81 @@
 }
 
 .contributorList li[data-v-35dc3539] {
-	background-color: rgba(51,51,51,.425);
+	background-color: rgba(51, 51, 51, 0.425);
 	border-radius: 20px;
 	padding: 20px;
-	font-size: 14px
+	font-size: 14px;
 }
 
-.contributorList li>div[data-v-35dc3539] {
+.contributorList li > div[data-v-35dc3539] {
 	padding: 10px 0;
-	border-bottom: 1px solid hsla(0,0%,75%,.404)
+	border-bottom: 1px solid hsla(0, 0%, 75%, 0.404);
 }
 
 .contributorList li h2[data-v-35dc3539] {
-	color: #a4c6ff
+	color: #a4c6ff;
 }
 
 .contributorList li .profile[data-v-35dc3539] {
 	display: flex;
 	flex-direction: column;
-	text-align: center
+	text-align: center;
 }
 
 .contributorList li .profile .profileImg[data-v-35dc3539] {
 	align-self: center;
 	width: 120px;
 	height: 140px;
 	border-radius: 45%;
-	overflow: hidden
+	overflow: hidden;
 }
 
 .contributorList li .profile .profileImg img[data-v-35dc3539] {
 	width: 100%;
-	height: 100%
+	height: 100%;
 }
 
 .contributorList li .profile h2[data-v-35dc3539] {
-	font-size: 14px
+	font-size: 14px;
 }
 
 .contributorList li .skill span[data-v-35dc3539] {
 	display: inline-block;
 	font-size: 12px;
 	padding: 2px;
 	margin: 0 5px 5px 0;
-	border-radius: 5px
+	border-radius: 5px;
 }
 
 .contributorList li .skill span[data-v-35dc3539]:first-child {
-	background-color: #dd4b39
+	background-color: #dd4b39;
 }
 
 .contributorList li .skill span[data-v-35dc3539]:nth-child(2) {
-	background-color: #00a65a
+	background-color: #00a65a;
 }
 
 .contributorList li .skill span[data-v-35dc3539]:nth-child(3) {
-	background-color: #00c0ef
+	background-color: #00c0ef;
 }
 
 .contributorList li .skill span[data-v-35dc3539]:nth-child(4) {
-	background-color: #f39c12
+	background-color: #f39c12;
 }
 
 .contributorList li .skill span[data-v-35dc3539]:nth-child(5) {
-	background-color: #3c8dbc
+	background-color: #3c8dbc;
 }
 
-@media(min-width: 750px)and (max-width:1080px) {
+@media (min-width: 750px) and (max-width: 1080px) {
 	.contributorList[data-v-35dc3539] {
-		grid-template-columns:repeat(3,1fr)
+		grid-template-columns: repeat(3, 1fr);
 	}
 }
 
-@media(min-width: 270px)and (max-width:750px) {
+@media (min-width: 270px) and (max-width: 750px) {
 	.contributorList[data-v-35dc3539] {
-		grid-template-columns:repeat(1,1fr)
+		grid-template-columns: repeat(1, 1fr);
 	}
 }
 
@@ -2204,7 +2325,7 @@
 	padding: 9px 0px 9px 18px !important;
 	margin: 9px 0 9px !important;
 	font-size: 16.25px;
-	border-left: 5px solid rgba(51,51,51,.425);
+	border-left: 5px solid rgba(51, 51, 51, 0.425);
 }
 
 .widget-controls {
@@ -2218,7 +2339,8 @@
 
 .alert-created {
 	width: max-content;
-	background: linear-gradient(90deg, #E49400 50%, transparent 50%), linear-gradient(90deg, #E49400 50%, transparent 50%), linear-gradient(0deg, #E49400 50%, transparent 50%), linear-gradient(0deg, #E49400 50%, transparent 50%);
+	background: linear-gradient(90deg, #e49400 50%, transparent 50%), linear-gradient(90deg, #e49400 50%, transparent 50%),
+		linear-gradient(0deg, #e49400 50%, transparent 50%), linear-gradient(0deg, #e49400 50%, transparent 50%);
 	background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
 	background-size: 15px 2px, 15px 2px, 2px 15px, 2px 15px;
 	padding: 1px;
@@ -2243,13 +2365,12 @@
 	position: relative;
 }
 
-
-
 .widget > .carousel {
 	margin: 0 -12px 5px;
 }
 
-.carousel-control.left, .carousel-control.right {
+.carousel-control.left,
+.carousel-control.right {
 	background: none;
 }
 .carousel-control i {
@@ -2322,12 +2443,349 @@
 	padding: 5px 0 calc(var(--d) + 5px);
 	background: linear-gradient(rgba(0, 0, 0, 0.6) 0 0) bottom/100% var(--d) no-repeat var(--c);
 	clip-path: polygon(
-			0 100%,
-			0 calc(100% - var(--d)),
-			50% calc(100% - var(--d) - var(--w) / 2),
-			100% calc(100% - var(--d)),
-			100% 100%,
-			calc(100% - var(--d)) calc(100% - var(--d)),
-			var(--d) calc(100% - var(--d))
+		0 100%,
+		0 calc(100% - var(--d)),
+		50% calc(100% - var(--d) - var(--w) / 2),
+		100% calc(100% - var(--d)),
+		100% 100%,
+		calc(100% - var(--d)) calc(100% - var(--d)),
+		var(--d) calc(100% - var(--d))
 	);
-}
\ No newline at end of file
+}
+
+.landing {
+	padding: 0;
+}
+
+/*--------------------------------------------------------------
+# Gnb
+--------------------------------------------------------------*/
+.container.gnb {
+	margin: 0 auto;
+	padding-top: 10px;
+	display: flex;
+	align-items: end;
+}
+.gnb h1 {
+	margin: 0;
+}
+.gnb .lnb a {
+	display: inline-block;
+	margin-left: 20px;
+	margin-bottom: 23px;
+	font-size: 16px;
+}
+
+/*--------------------------------------------------------------
+# About
+--------------------------------------------------------------*/
+.landing .widget-about {
+	padding: 120px 20px;
+}
+
+/*--------------------------------------------------------------
+# Contact
+--------------------------------------------------------------*/
+.contact {
+	margin: 100px auto;
+}
+.section-title h2 {
+	text-align: center;
+	font-size: 32px;
+	font-weight: bold;
+	text-transform: uppercase;
+	margin-bottom: 15%;
+	padding-bottom: 20px;
+	position: relative;
+	color: #fff;
+}
+
+.section-title h2::before {
+	content: "";
+	position: absolute;
+	display: block;
+	width: 120px;
+	height: 1px;
+	background: #ddd;
+	bottom: 1px;
+	left: calc(50% - 60px);
+}
+
+.section-title h2::after {
+	content: "";
+	position: absolute;
+	display: block;
+	width: 40px;
+	height: 3px;
+	background: #2477ff;
+	bottom: 0;
+	left: calc(50% - 20px);
+}
+
+.section-title p {
+	text-align: center;
+	margin-bottom: 0;
+}
+
+.contact .info {
+	width: 100%;
+}
+
+.contact .info i {
+	font-size: 20px;
+	color: #2477ff;
+	float: left;
+	width: 44px;
+	height: 44px;
+	background: #eef7ff;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	border-radius: 50px;
+	transition: all 0.3s ease-in-out;
+}
+
+.contact .info h4 {
+	padding: 0 0 0 60px;
+	font-size: 22px;
+	font-weight: 600;
+	margin-bottom: 5px;
+}
+
+.contact .info p {
+	padding: 0 0 0 60px;
+	margin-bottom: 0;
+	font-size: 14px;
+}
+
+.contact .info .email,
+.contact .info .phone {
+	margin-top: 40px;
+}
+
+.contact .info .email:hover i,
+.contact .info .address:hover i,
+.contact .info .phone:hover i {
+	background: #2477ff;
+	color: #fff;
+}
+
+.contact .php-email-form {
+	width: 100%;
+}
+
+.contact .php-email-form .row {
+	margin-top: 0;
+}
+
+.contact .php-email-form .form-group {
+	padding-bottom: 8px;
+}
+
+.contact .php-email-form .error-message {
+	display: none;
+	color: #fff;
+	background: #ed3c0d;
+	text-align: left;
+	padding: 15px;
+	font-weight: 600;
+}
+
+.contact .php-email-form .error-message br + br {
+	margin-top: 25px;
+}
+
+.contact .php-email-form .sent-message {
+	display: none;
+	color: #fff;
+	background: #18d26e;
+	text-align: center;
+	padding: 15px;
+	font-weight: 600;
+}
+
+.contact .php-email-form .loading {
+	display: none;
+	background: #fff;
+	text-align: center;
+	padding: 15px;
+}
+
+.contact .php-email-form .loading:before {
+	content: "";
+	display: inline-block;
+	border-radius: 50%;
+	width: 24px;
+	height: 24px;
+	margin: 0 10px -6px 0;
+	border: 3px solid #18d26e;
+	border-top-color: #eee;
+	animation: animate-loading 1s linear infinite;
+}
+
+.contact .php-email-form input,
+.contact .php-email-form textarea {
+	border-radius: 4px;
+	box-shadow: none;
+	font-size: 14px;
+	color: #fff;
+	background-color: transparent;
+}
+
+.contact .php-email-form input::placeholder,
+.contact .php-email-form textarea::placeholder {
+	color: #fff;
+}
+
+.contact .php-email-form input[type="text"],
+.contact .php-email-form input[type="email"] {
+	height: 44px;
+}
+
+.contact .php-email-form textarea {
+	padding: 10px 12px;
+}
+
+.contact .php-email-form button[type="submit"] {
+	background: #2477ff;
+	border: 0;
+	padding: 10px 35px;
+	font-size: 14px;
+	color: #fff;
+	transition: 0.4s;
+	border-radius: 50px;
+}
+
+.contact .php-email-form button[type="submit"]:hover {
+	background: #0678e3;
+}
+
+/*--------------------------------------------------------------
+# Footer
+--------------------------------------------------------------*/
+#footer {
+	padding: 80px 20px;
+}
+.footer {
+	display: flex;
+}
+.menu-wrap h4 {
+	margin-bottom: 1em;
+}
+.menu-wrap a {
+	display: block;
+	margin-bottom: 10px;
+	line-height: 20px;
+}
+
+/*--------------------------------------------------------------
+# Visual mobile
+--------------------------------------------------------------*/
+.visual-mobile {
+	display: none;
+	height: calc(100vh - 80px);
+	justify-content: center;
+	align-items: center;
+}
+
+.content-view {
+	position: relative;
+	width: 100%;
+	max-width: 650px;
+	aspect-ratio: 4 / 3;
+}
+
+.content-item {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	opacity: 0;
+}
+
+.content-item img {
+	width: 100%;
+	height: 100%;
+	object-fit: fill;
+}
+
+.content-item.plan {
+	animation: fadeIn 0.5s forwards 1s, fadeOut 0.5s forwards 2s;
+}
+
+.content-item.review {
+	animation: fadeIn 0.5s forwards 2s, fadeOut 0.5s forwards 3s;
+}
+
+.content-item.develop {
+	animation: fadeIn 0.5s forwards 3s, fadeOut 0.5s forwards 4s;
+}
+
+.content-item.what {
+	animation: fadeIn 0.5s forwards 4s, fadeOut 0.5s forwards 5s;
+}
+
+.content-item.developer {
+	animation: fadeIn 0.5s forwards 5s, fadeOut 0.5s forwards 6s;
+}
+
+.content-item.stop {
+	animation: fadeIn 0.5s forwards 6s, fadeOut 0.5s forwards 7s;
+}
+
+.content-item.arms {
+	font-size: 16px;
+	line-height: 1.5;
+	text-align: center;
+	animation: fadeIn 0.5s forwards 7s;
+}
+
+@media (max-width: 992px) {
+	.container.gnb {
+		height: 80px;
+		padding-left: 10px;
+	}
+	.gnb a {
+		display: block;
+	}
+	.gnb .logo,
+	.gnb h1,
+	.gnb a,
+	.gnb img {
+		width: auto;
+		height: 100%;
+	}
+	.gnb .lnb a {
+		margin-bottom: 15px;
+	}
+	.visual-web {
+		display: none;
+	}
+	.visual-mobile {
+		display: flex;
+	}
+}
+
+@keyframes fadeIn {
+	from {
+		opacity: 0;
+		scale: 1.5;
+	}
+	to {
+		opacity: 1;
+		scale: 1;
+	}
+}
+
+@keyframes fadeOut {
+	from {
+		opacity: 1;
+		scale: 1;
+	}
+	to {
+		opacity: 0;
+		scale: 0;
+	}
+}
Index: arms/html/pdService
===================================================================
diff -u -rd7245f982947623a5f957ee168b671d67862c4d5 -r9b9bc0758ca36439391fec3b56dab0049222ee4e
--- arms/html/pdService	(.../pdService)	(revision d7245f982947623a5f957ee168b671d67862c4d5)
+++ arms/html/pdService	(.../pdService)	(revision 9b9bc0758ca36439391fec3b56dab0049222ee4e)
@@ -1,514 +1,692 @@
 <!DOCTYPE html>
 <html>
-<head>
-    <title>a-RMS</title>
+	<head>
+		<title>a-RMS</title>
 
-    <meta charset="utf-8" />
-    <meta
-            http-equiv="X-UA-Compatible"
-            content="IE=edge" />
-    <!-- Tell the browser to be responsive to screen width -->
-    <meta
-            name="viewport"
-            content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
+		<meta charset="utf-8" />
+		<meta
+			http-equiv="X-UA-Compatible"
+			content="IE=edge" />
+		<!-- Tell the browser to be responsive to screen width -->
+		<meta
+			name="viewport"
+			content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
 
-    <meta
-            http-equiv="Expire"
-            content="-1" />
-    <meta
-            http-equiv="Keywords"
-            content="a-RMS" />
-    <meta
-            http-equiv="Reply-to"
-            content="admin@a-rms.net" />
-    <meta
-            http-equiv="Content-Language"
-            content="Korean" />
-    <meta
-            http-equiv="Last-Modified"
-            content="Thu 01 Nov 2016 23:59:59" />
-    <meta
-            http-equiv="Organization"
-            content="www.a-rms.net" />
-    <meta
-            http-equiv="Content-Type"
-            content="text/html;charset=utf-8" />
-    <meta
-            http-equiv="Cache-Control"
-            content="no-cache" />
-    <meta
-            http-equiv="Pragma"
-            content="no-cache" />
-    <meta
-            http-equiv="imagetoolbar"
-            content="no" />
-    <meta
-            http-equiv="content-Script-type"
-            content="text/javascript" />
-    <meta
-            http-equiv="content-Style-type"
-            content="text/css" />
+		<meta
+			http-equiv="Expire"
+			content="-1" />
+		<meta
+			http-equiv="Keywords"
+			content="a-RMS" />
+		<meta
+			http-equiv="Reply-to"
+			content="admin@a-rms.net" />
+		<meta
+			http-equiv="Content-Language"
+			content="Korean" />
+		<meta
+			http-equiv="Last-Modified"
+			content="Thu 01 Nov 2016 23:59:59" />
+		<meta
+			http-equiv="Organization"
+			content="www.a-rms.net" />
+		<meta
+			http-equiv="Content-Type"
+			content="text/html;charset=utf-8" />
+		<meta
+			http-equiv="Cache-Control"
+			content="no-cache" />
+		<meta
+			http-equiv="Pragma"
+			content="no-cache" />
+		<meta
+			http-equiv="imagetoolbar"
+			content="no" />
+		<meta
+			http-equiv="content-Script-type"
+			content="text/javascript" />
+		<meta
+			http-equiv="content-Style-type"
+			content="text/css" />
 
-    <meta
-            name="robots"
-            content="ALL, INDEX, FOLLOW" />
-    <meta
-            name="Subject"
-            content="a-RMS" />
-    <meta
-            name="Filename"
-            content="ARMS.html" />
-    <meta
-            name="Author-Date"
-            content="31 Oct 16" />
-    <meta
-            name="Date"
-            content="31 Oct 16" />
-    <meta
-            name="Author"
-            content="LeeDongmin" />
-    <meta
-            name="Other Agent"
-            content="LeeDongMin" />
-    <meta
-            name="Email"
-            content="admin@a-rms.net" />
-    <meta
-            name="Reply-To"
-            content="admin@a-rms.net" />
-    <meta
-            name="Project"
-            content="a-RMS" />
-    <meta
-            name="Status"
-            content="Draft" />
-    <meta
-            name="Location"
-            content="South Korea" />
-    <meta
-            name="/distribution"
-            content="aRMS" />
-    <meta
-            name="Description"
-            content="Standard Web Project" />
-    <meta
-            name="verify-v1"
-            content="Eal6+fiCjgKAZb5A6pRvSLmsh9NLF2AsqxqJrLuFoAs=" />
-    <meta
-            name="Revision"
-            content="1.0" />
-    <meta
-            name="Generator"
-            content="eclipse 3.6.1" />
-    <meta
-            name="Classification"
-            content="Development,Deployment" />
-    <meta
-            name="Copyright"
-            content="CopyRight@aRMS. All Rights Reserved" />
-    <meta
-            name="title"
-            content="a-RMS" />
-    <meta
-            name="revisit-after"
-            content="7 days" />
-    <meta
-            name="siteinfo"
-            content="http://www.a-rms.net/robots.txt" />
-    <meta
-            name="HandheldFriendly"
-            content="True" />
-    <meta
-            name="MobileOptimized"
-            content="320" />
+		<meta
+			name="robots"
+			content="ALL, INDEX, FOLLOW" />
+		<meta
+			name="Subject"
+			content="a-RMS" />
+		<meta
+			name="Filename"
+			content="ARMS.html" />
+		<meta
+			name="Author-Date"
+			content="31 Oct 16" />
+		<meta
+			name="Date"
+			content="31 Oct 16" />
+		<meta
+			name="Author"
+			content="LeeDongmin" />
+		<meta
+			name="Other Agent"
+			content="LeeDongMin" />
+		<meta
+			name="Email"
+			content="admin@a-rms.net" />
+		<meta
+			name="Reply-To"
+			content="admin@a-rms.net" />
+		<meta
+			name="Project"
+			content="a-RMS" />
+		<meta
+			name="Status"
+			content="Draft" />
+		<meta
+			name="Location"
+			content="South Korea" />
+		<meta
+			name="/distribution"
+			content="aRMS" />
+		<meta
+			name="Description"
+			content="Standard Web Project" />
+		<meta
+			name="verify-v1"
+			content="Eal6+fiCjgKAZb5A6pRvSLmsh9NLF2AsqxqJrLuFoAs=" />
+		<meta
+			name="Revision"
+			content="1.0" />
+		<meta
+			name="Generator"
+			content="eclipse 3.6.1" />
+		<meta
+			name="Classification"
+			content="Development,Deployment" />
+		<meta
+			name="Copyright"
+			content="CopyRight@aRMS. All Rights Reserved" />
+		<meta
+			name="title"
+			content="a-RMS" />
+		<meta
+			name="revisit-after"
+			content="7 days" />
+		<meta
+			name="siteinfo"
+			content="http://www.a-rms.net/robots.txt" />
+		<meta
+			name="HandheldFriendly"
+			content="True" />
+		<meta
+			name="MobileOptimized"
+			content="320" />
 
-    <meta
-            property="og:type"
-            content="website" />
-    <meta
-            property="og:title"
-            content="a-RMS" />
-    <meta
-            property="og:url"
-            content="http://www.a-rms.net/" />
-    <meta
-            property="og:site_name"
-            content="a-RMS" />
+		<meta
+			property="og:type"
+			content="website" />
+		<meta
+			property="og:title"
+			content="a-RMS" />
+		<meta
+			property="og:url"
+			content="http://www.a-rms.net/" />
+		<meta
+			property="og:site_name"
+			content="a-RMS" />
 
-    <!-- favicon -->
-    <link
-            rel="icon"
-            href="./img/313_logo.ico"
-            type="image/x-icon" />
-    <link
-            rel="shortcut icon"
-            href="./img/313_logo.ico"
-            type="image/x-icon" />
+		<!-- favicon -->
+		<link
+			rel="icon"
+			href="./img/313_logo.ico"
+			type="image/x-icon" />
+		<link
+			rel="shortcut icon"
+			href="./img/313_logo.ico"
+			type="image/x-icon" />
 
-    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
-    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
-    <!--[if lt IE 9]>
-    <script src="../reference/jquery-plugins/html5shiv.js"></script>
-    <script src="../reference/jquery-plugins/respond.js"></script>
-    <![endif]-->
+		<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
+		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+		<!--[if lt IE 9]>
+			<script src="../reference/jquery-plugins/html5shiv.js"></script>
+			<script src="../reference/jquery-plugins/respond.js"></script>
+		<![endif]-->
 
-    <link
-            href="../reference/jquery-plugins/normalize.css-8.0.1/normalize.css"
-            rel="stylesheet" />
-    <link
-            href="../reference/light-blue/css/application.min.css"
-            rel="stylesheet" />
-    <link
-            href="css/override.css"
-            rel="stylesheet" />
+		<link
+			href="../reference/jquery-plugins/normalize.css-8.0.1/normalize.css"
+			rel="stylesheet" />
+		<link
+			href="../reference/light-blue/css/application.min.css"
+			rel="stylesheet" />
+		<link
+			href="index/assets/vendor/bootstrap-icons/bootstrap-icons.css"
+			rel="stylesheet" />
+		<link
+			href="css/override.css"
+			rel="stylesheet" />
 
-    <!-- jquery and friends -->
-    <script src="../reference/light-blue/lib/jquery/jquery-2.0.3.min.js"></script>
+		<!-- jquery and friends -->
+		<script src="../reference/light-blue/lib/jquery/jquery-2.0.3.min.js"></script>
 
-    <!-- bootstrap default plugins -->
-    <script src="../reference/light-blue/lib/bootstrap/transition.js"></script>
-    <script src="../reference/light-blue/lib/bootstrap/carousel.js"></script>
+		<!-- bootstrap default plugins -->
+		<script src="../reference/light-blue/lib/bootstrap/transition.js"></script>
+		<script src="../reference/light-blue/lib/bootstrap/carousel.js"></script>
 
-    <!-- page specific -->
-    <script src="../reference/light-blue/js/landing.js"></script>
+		<!-- page specific -->
+		<script src="../reference/light-blue/js/landing.js"></script>
+	</head>
+	<body class="background landing">
+		<header class="page-header container gnb">
+			<div class="logo">
+				<h1>
+					<a href="index.html">
+						<img
+							src="./img/313_logo.png"
+							width="170px" />
+					</a>
+				</h1>
+			</div>
+			<nav class="lnb">
+				<a href="">Preview</a>
+				<a href="#contact">Contact</a>
+			</nav>
+		</header>
+		<div class="container visual-web">
+			<div class="content">
+				<div
+					id="carousel-landing"
+					class="carousel slide carousel-landing carousel-fade"
+					data-ride="carousel">
+					<ol class="carousel-indicators">
+						<li
+							data-target="#carousel-landing"
+							data-slide-to="0"
+							class="active"></li>
+						<li
+							data-target="#carousel-landing"
+							data-slide-to="1"
+							class=""></li>
+						<li
+							data-target="#carousel-landing"
+							data-slide-to="2"
+							class=""></li>
+					</ol>
+					<div class="carousel-inner">
+						<div class="item active">
+							<div class="row">
+								<div class="col-xs-6">
+									<div class="animated fadeInLeftBig">
+										<h1
+											class="slide-one-header"
+											style="font-size: 17px !important">
+											<strong>aRMS</strong>
+											<span>는</span>
+										</h1>
+										<p class="hidden-xs">
+											<strong>제품(서비스)</strong>
+											관점의 JIRA 전용 RMS 입니다.
+										</p>
+										<p class="hidden-xs">
+											제품(서비스) 중심으로 Jira Project를 분석하고,
+											<br />
+											제품(서비스) 중심으로 요구사항을 Jira Project 에 전파합니다.
+										</p>
+										<br />
+										<!--										<p>-->
+										<!--											<a-->
+										<!--												href="template.html?page=pdService"-->
+										<!--												class="btn btn-lg btn-white">-->
+										<!--												Preview &nbsp;-->
+										<!--												<i class="fa fa-angle-right"></i>-->
+										<!--											</a>-->
+										<!--											<a-->
+										<!--												href="http://www.313.co.kr"-->
+										<!--												class="btn btn-lg btn-transparent">-->
+										<!--												Contact us &nbsp;-->
+										<!--												<i class="fa eicon-qq"></i>-->
+										<!--											</a>-->
+										<!--										</p>-->
+									</div>
+								</div>
+								<div class="col-xs-6">
+									<div class="text-align-center animated fadeInRightBig">
+										<img
+											src="../reference/light-blue/img/jpeg/light-blue-preview-1.png"
+											alt="Second slide" />
+									</div>
+								</div>
+							</div>
+						</div>
+						<div class="item">
+							<h1
+								class="slide-two-header text-align-center animated fadeInDown"
+								style="font-size: 24px !important">
+								<strong>aRMS</strong>
+								<span class="font16">는</span>
+								제품(서비스) 관점
+								<span class="font16">으로</span>
+								<strong>다양한 분석 지표</strong>
+								<span class="font16">를 지속적으로 업데이트 및 제공합니다.</span>
+							</h1>
+							<div class="row">
+								<div class="col-xs-6">
+									<div class="animated fadeInLeftBig">
+										<p>
+											<a href="template.html?page=pdService">
+												<img
+													src="../reference/light-blue/img/jpeg/light-blue-laptop-transparent.png"
+													alt="" />
+											</a>
+										</p>
+										<!--										<p class="text-align-center">-->
+										<!--											<a-->
+										<!--												href="template.html?page=pdService"-->
+										<!--												class="btn btn-transparent btn-lg btn-version-preview">-->
+										<!--												Preview &nbsp;-->
+										<!--												<i class="fa fa-angle-right"></i>-->
+										<!--											</a>-->
+										<!--										</p>-->
+									</div>
+								</div>
+								<div class="col-xs-6">
+									<div class="animated fadeInRightBig">
+										<p>
+											<a href="http://www.313.co.kr">
+												<img
+													src="../reference/light-blue/img/jpeg/light-blue-laptop-white.png"
+													alt="" />
+											</a>
+										</p>
+										<!--										<p class="text-align-center">-->
+										<!--											<a-->
+										<!--												href="http://www.313.co.kr"-->
+										<!--												class="btn btn-white btn-lg btn-version-preview">-->
+										<!--												Contact us &nbsp;-->
+										<!--												<i class="fa eicon-qq"></i>-->
+										<!--											</a>-->
+										<!--										</p>-->
+									</div>
+								</div>
+							</div>
+						</div>
+						<div class="item">
+							<div class="row">
+								<div class="col-xs-6">
+									<div class="animated fadeInLeft">
+										<h1
+											class="slide-three-header"
+											style="font-size: 17px !important">
+											Jira를 쓰고 계십니까?
+											<br />
+											<br />
+											제품(서비스)를 만들고 계십니까?
+											<br />
+											<br />
+											<strong>aRMS가 필요합니다.!</strong>
+											<br />
+											<br />
+											제품(서비스)의 요구사항을 관리 하고,
+											<br />
+											<br />
+											제품(서비스)의 진척도를 확인 하고,
+											<br />
+											<br />
+											제품(서비스)의 출시를 결정 할 수 있습니다.
+										</h1>
+										<!--										<p>-->
+										<!--											<a-->
+										<!--												href="template.html?page=pdService"-->
+										<!--												class="btn btn-white btn-lg"-->
+										<!--												target="_blank">-->
+										<!--												Test It-->
+										<!--											</a>-->
+										<!--										</p>-->
+									</div>
+								</div>
+								<div class="col-xs-6">
+									<p
+										class="animated fadeInUp"
+										style="margin-top: 20px">
+										<img
+											src="../reference/light-blue/img/jpeg/light-blue-phone.png"
+											alt="" />
+									</p>
+								</div>
+							</div>
+						</div>
+					</div>
+					<a
+						class="left carousel-control carousel-control-landing"
+						href="#carousel-landing"
+						data-slide="prev">
+						<span class="icon-prev"></span>
+					</a>
+					<a
+						class="right carousel-control carousel-control-landing"
+						href="#carousel-landing"
+						data-slide="next">
+						<span class="icon-next"></span>
+					</a>
+				</div>
+			</div>
+		</div>
+		<div class="container visual-mobile">
+			<div class="content-view">
+				<div class="content-item plan">
+					<img
+						src="./img/landing/plan.jpg"
+						alt="plan" />
+				</div>
+				<div class="content-item review">
+					<img
+						src="./img/landing/review.png"
+						alt="review" />
+				</div>
 
-</head>
-<body class="background landing">
-<div class="container">
-    <header class="page-header">
-        <div class="navbar">
-            <div class="logo pull-left">
-                <h4>
-                    <a href="index.html">
-                        <img
-                                src="./img/313_logo.png"
-                                width="170px" />
-                    </a>
-                </h4>
-            </div>
-        </div>
-    </header>
-    <div class="content">
-        <div
-                id="carousel-landing"
-                class="carousel slide carousel-landing carousel-fade">
-            <ol class="carousel-indicators">
-                <li
-                        data-target="#carousel-landing"
-                        data-slide-to="0"
-                        class="active"></li>
-                <li
-                        data-target="#carousel-landing"
-                        data-slide-to="1"
-                        class=""></li>
-                <li
-                        data-target="#carousel-landing"
-                        data-slide-to="2"
-                        class=""></li>
-            </ol>
-            <div class="carousel-inner">
-                <div class="item active">
-                    <div class="row">
-                        <div class="col-xs-6">
-                            <div class="animated fadeInLeftBig">
-                                <h1
-                                        class="slide-one-header"
-                                        style="font-size: 17px !important">
-                                    <strong>aRMS</strong>
-                                    <span>는</span>
-                                </h1>
-                                <p class="hidden-xs">
-                                    <strong>제품(서비스)</strong>
-                                    관점의 JIRA 전용 RMS 입니다.
-                                </p>
-                                <p class="hidden-xs">
-                                    제품(서비스) 중심으로 Jira Project를 분석하고,
-                                    <br />
-                                    제품(서비스) 중심으로 요구사항을 Jira Project 에 전파합니다.
-                                </p>
-                                <br />
-                                <p>
-                                    <a
-                                            href="template.html?page=pdService"
-                                            class="btn btn-lg btn-white">
-                                        Preview &nbsp;
-                                        <i class="fa fa-angle-right"></i>
-                                    </a>
-<!--                                    <a-->
-<!--                                            href="http://www.313.co.kr"-->
-<!--                                            class="btn btn-lg btn-transparent">-->
-<!--                                        Contact us &nbsp;-->
-<!--                                        <i class="fa eicon-qq"></i>-->
-<!--                                    </a>-->
-                                </p>
-                            </div>
-                        </div>
-                        <div class="col-xs-6">
-                            <div class="text-align-center animated fadeInRightBig">
-                                <img
-                                        src="../reference/light-blue/img/jpeg/light-blue-preview-1.png"
-                                        alt="Second slide" />
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="item">
-                    <h1
-                            class="slide-two-header text-align-center animated fadeInDown"
-                            style="font-size: 24px !important">
-                        <strong>aRMS</strong>
-                        <span class="font16">는</span>
-                        제품(서비스) 관점
-                        <span class="font16">으로</span>
-                        <strong>다양한 분석 지표</strong>
-                        <span class="font16">를 지속적으로 업데이트 및 제공합니다.</span>
-                    </h1>
-                    <div class="row">
-                        <div class="col-xs-6">
-                            <div class="animated fadeInLeftBig">
-                                <p>
-                                    <a href="template.html?page=pdService">
-                                        <img
-                                                src="../reference/light-blue/img/jpeg/light-blue-laptop-transparent.png"
-                                                alt="" />
-                                    </a>
-                                </p>
-                                <p class="text-align-center">
-                                    <a
-                                            href="template.html?page=pdService"
-                                            class="btn btn-transparent btn-lg btn-version-preview">
-                                        Preview &nbsp;
-                                        <i class="fa fa-angle-right"></i>
-                                    </a>
-                                </p>
-                            </div>
-                        </div>
-                        <div class="col-xs-6">
-                            <div class="animated fadeInRightBig">
-                                <p>
-                                    <a href="http://www.313.co.kr">
-                                        <img
-                                                src="../reference/light-blue/img/jpeg/light-blue-laptop-white.png"
-                                                alt="" />
-                                    </a>
-                                </p>
-                                <p class="text-align-center">
-                                    <a
-                                            href="http://www.313.co.kr"
-                                            class="btn btn-white btn-lg btn-version-preview">
-                                        Contact us &nbsp;
-                                        <i class="fa eicon-qq"></i>
-                                    </a>
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="item">
-                    <div class="row">
-                        <div class="col-xs-6">
-                            <div class="animated fadeInLeft">
-                                <h1
-                                        class="slide-three-header"
-                                        style="font-size: 17px !important">
-                                    Jira를 쓰고 계십니까?
-                                    <br />
-                                    <br />
-                                    제품(서비스)를 만들고 계십니까?
-                                    <br />
-                                    <br />
-                                    <strong>aRMS가 필요합니다.!</strong>
-                                    <br />
-                                    <br />
-                                    제품(서비스)의 요구사항을 관리 하고,
-                                    <br />
-                                    <br />
-                                    제품(서비스)의 진척도를 확인 하고,
-                                    <br />
-                                    <br />
-                                    제품(서비스)의 출시를 결정 할 수 있습니다.
-                                </h1>
-                                <p>
-                                    <a
-                                            href="template.html?page=pdService"
-                                            class="btn btn-white btn-lg"
-                                            target="_blank">
-                                        Test It
-                                    </a>
-                                </p>
-                            </div>
-                        </div>
-                        <div class="col-xs-6">
-                            <p
-                                    class="animated fadeInUp"
-                                    style="margin-top: 20px">
-                                <img
-                                        src="../reference/light-blue/img/jpeg/light-blue-phone.png"
-                                        alt="" />
-                            </p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <a
-                    class="left carousel-control carousel-control-landing"
-                    href="#carousel-landing"
-                    data-slide="prev">
-                <span class="icon-prev"></span>
-            </a>
-            <a
-                    class="right carousel-control carousel-control-landing"
-                    href="#carousel-landing"
-                    data-slide="next">
-                <span class="icon-next"></span>
-            </a>
-        </div>
-    </div>
-</div>
-<div
-        id="about"
-        class="widget widget-white widget-about">
-    <div class="container">
-        <div class="row">
-            <div class="col-sm-offset-1 col-sm-10">
-                <h2>
-                    atlassian
-                    <strong>RMS</strong>
-                </h2>
-                <p>
-                    atlassian
-                    <strong>Requirements Managment System</strong>
-                    은 전세계에서 유일한 Jira 를 기반한 요구사항 관리 시스템입니다.
-                </p>
-                <div class="row features">
-                    <div class="col-sm-4">
-                        <section class="feature">
-                            <div class="row">
-                                <div class="col-xs-4">
-                                    <p>
+				<div class="content-item develop">
+					<img
+						src="./img/landing/develop.png"
+						alt="develop" />
+				</div>
+				<div class="content-item what">
+					<img
+						src="./img/landing/what.jpg"
+						alt="what" />
+				</div>
+				<div class="content-item developer">
+					<img
+						src="./img/landing/developer.jpg"
+						alt="developer" />
+				</div>
+				<div class="content-item stop">
+					<img
+						src="./img/landing/stop.png"
+						alt="stop" />
+				</div>
+				<div class="content-item arms">
+					<p>
+						<strong>ARMS</strong>
+						는 Project 요구사항을 ALM에
+						<br />
+						<strong>연결하고 관리</strong>
+						합니다.
+					</p>
+				</div>
+			</div>
+		</div>
+		<div
+			id="about"
+			class="widget widget-white widget-about">
+			<div class="container">
+				<div class="row">
+					<div class="col-sm-offset-1 col-sm-10">
+						<h2>
+							atlassian
+							<strong>RMS</strong>
+						</h2>
+						<p>
+							atlassian
+							<strong>Requirements Managment System</strong>
+							은 전세계에서 유일한 Jira 를 기반한 요구사항 관리 시스템입니다.
+						</p>
+						<div class="row features">
+							<div class="col-sm-4">
+								<section class="feature">
+									<div class="row">
+										<div class="col-xs-4">
+											<p>
 												<span class="icon background-danger">
 													<i class="fa fa-bold"></i>
 												</span>
-                                    </p>
-                                </div>
-                                <div class="col-xs-8">
-                                    <h4>Scope</h4>
-                                    <p>제품(서비스)의 요구사항이 Jira의 END USER 까지 공유</p>
-                                </div>
-                            </div>
-                        </section>
-                    </div>
-                    <div class="col-sm-4">
-                        <section class="feature">
-                            <div class="row">
-                                <div class="col-xs-4">
-                                    <p>
+											</p>
+										</div>
+										<div class="col-xs-8">
+											<h4>Scope</h4>
+											<p>제품(서비스)의 요구사항이 Jira의 END USER 까지 공유</p>
+										</div>
+									</div>
+								</section>
+							</div>
+							<div class="col-sm-4">
+								<section class="feature">
+									<div class="row">
+										<div class="col-xs-4">
+											<p>
 												<span class="icon background-warning">
 													<i class="fa fa-magic"></i>
 												</span>
-                                    </p>
-                                </div>
-                                <div class="col-xs-8">
-                                    <h4>Cost</h4>
-                                    <p>
-                                        제품(서비스)의 Jira 분석
-                                        <br />
-                                        &#10132; 정확한 Resource 통계
-                                    </p>
-                                </div>
-                            </div>
-                        </section>
-                    </div>
-                    <div class="col-sm-4">
-                        <section class="feature">
-                            <div class="row">
-                                <div class="col-xs-4">
-                                    <p>
+											</p>
+										</div>
+										<div class="col-xs-8">
+											<h4>Cost</h4>
+											<p>
+												제품(서비스)의 Jira 분석
+												<br />
+												&#10132; 정확한 Resource 통계
+											</p>
+										</div>
+									</div>
+								</section>
+							</div>
+							<div class="col-sm-4">
+								<section class="feature">
+									<div class="row">
+										<div class="col-xs-4">
+											<p>
 												<span class="icon background-success">
 													<i class="fa fa-wrench"></i>
 												</span>
-                                    </p>
-                                </div>
-                                <div class="col-xs-8">
-                                    <h4>Time</h4>
-                                    <p>
-                                        제품(서비스) Jira Project 맵핑
-                                        <br />
-                                        &#10132; 실질적인 진척도 측정
-                                    </p>
-                                </div>
-                            </div>
-                        </section>
-                    </div>
-                </div>
-                <div class="row features">
-                    <div class="col-sm-4">
-                        <section class="feature">
-                            <div class="row">
-                                <div class="col-xs-4">
-                                    <p>
+											</p>
+										</div>
+										<div class="col-xs-8">
+											<h4>Time</h4>
+											<p>
+												제품(서비스) Jira Project 맵핑
+												<br />
+												&#10132; 실질적인 진척도 측정
+											</p>
+										</div>
+									</div>
+								</section>
+							</div>
+						</div>
+						<div class="row features">
+							<div class="col-sm-4">
+								<section class="feature">
+									<div class="row">
+										<div class="col-xs-4">
+											<p>
 												<span class="icon background-primary">
 													<i class="fa fa-superscript"></i>
 												</span>
-                                    </p>
-                                </div>
-                                <div class="col-xs-8">
-                                    <h4>제품(서비스)</h4>
-                                    <p>
-                                        aRMS는 제품과 서비스를 기준
-                                        <br />
-                                        &#10132; 데이터를 구조화 합니다.
-                                    </p>
-                                </div>
-                            </div>
-                        </section>
-                    </div>
-                    <div class="col-sm-4">
-                        <section class="feature">
-                            <div class="row">
-                                <div class="col-xs-4">
-                                    <p>
+											</p>
+										</div>
+										<div class="col-xs-8">
+											<h4>제품(서비스)</h4>
+											<p>
+												aRMS는 제품과 서비스를 기준
+												<br />
+												&#10132; 데이터를 구조화 합니다.
+											</p>
+										</div>
+									</div>
+								</section>
+							</div>
+							<div class="col-sm-4">
+								<section class="feature">
+									<div class="row">
+										<div class="col-xs-4">
+											<p>
 												<span class="icon background-lime">
 													<i class="fa fa-check"></i>
 												</span>
-                                    </p>
-                                </div>
-                                <div class="col-xs-8">
-                                    <h4>요구사항</h4>
-                                    <p>
-                                        ARMS는 제품과 서비스를 기준
-                                        <br />
-                                        &#10132; 요구사항을 관리합니다.
-                                    </p>
-                                </div>
-                            </div>
-                        </section>
-                    </div>
-                    <div class="col-sm-4">
-                        <section class="feature">
-                            <div class="row">
-                                <div class="col-xs-4">
-                                    <p>
+											</p>
+										</div>
+										<div class="col-xs-8">
+											<h4>요구사항</h4>
+											<p>
+												ARMS는 제품과 서비스를 기준
+												<br />
+												&#10132; 요구사항을 관리합니다.
+											</p>
+										</div>
+									</div>
+								</section>
+							</div>
+							<div class="col-sm-4">
+								<section class="feature">
+									<div class="row">
+										<div class="col-xs-4">
+											<p>
 												<span class="icon background-info">
 													<i class="fa fa-css3"></i>
 												</span>
-                                    </p>
-                                </div>
-                                <div class="col-xs-8">
-                                    <h4>Test(QA)</h4>
-                                    <p>
-                                        ARMS는 제품과 서비스를 기준
-                                        <br />
-                                        &#10132; 요구사항의 테스트를 관리
-                                    </p>
-                                </div>
-                            </div>
-                        </section>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-</body>
+											</p>
+										</div>
+										<div class="col-xs-8">
+											<h4>Test(QA)</h4>
+											<p>
+												ARMS는 제품과 서비스를 기준
+												<br />
+												&#10132; 요구사항의 테스트를 관리
+											</p>
+										</div>
+									</div>
+								</section>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div
+			id="contact"
+			class="container contact">
+			<div class="section-title">
+				<h2>Contact</h2>
+			</div>
+
+			<div class="row">
+				<div class="col-lg-4">
+					<div class="info">
+						<div class="address">
+							<i class="bi bi-geo-alt"></i>
+							<h4>Location:</h4>
+							<p>A108 Adam Street, New York, NY 535022</p>
+						</div>
+
+						<div class="email">
+							<i class="bi bi-envelope"></i>
+							<h4>Email:</h4>
+							<p>info@example.com</p>
+						</div>
+
+						<div class="phone">
+							<i class="bi bi-phone"></i>
+							<h4>Call:</h4>
+							<p>+1 5589 55488 55s</p>
+						</div>
+					</div>
+				</div>
+
+				<div class="col-lg-8 mt-5 mt-lg-0">
+					<form
+						action="index/forms/contact.php"
+						method="post"
+						role="form"
+						class="php-email-form">
+						<div class="row">
+							<div class="col-md-6 form-group">
+								<input
+									type="text"
+									name="name"
+									class="form-control"
+									id="name"
+									placeholder="Your Name"
+									required />
+							</div>
+							<div class="col-md-6 form-group mt-3 mt-md-0">
+								<input
+									type="email"
+									class="form-control"
+									name="email"
+									id="email"
+									placeholder="Your Email"
+									required />
+							</div>
+						</div>
+						<div class="form-group mt-3">
+							<input
+								type="text"
+								class="form-control"
+								name="subject"
+								id="subject"
+								placeholder="Subject"
+								required />
+						</div>
+						<div class="form-group mt-3">
+							<textarea
+								class="form-control"
+								name="message"
+								rows="5"
+								placeholder="Message"
+								required></textarea>
+						</div>
+						<div class="my-3">
+							<div class="loading">Loading</div>
+							<div class="error-message"></div>
+							<div class="sent-message">Your message has been sent. Thank you!</div>
+						</div>
+						<div class="text-center"><button type="submit">Send Message</button></div>
+					</form>
+				</div>
+			</div>
+		</div>
+		<footer
+			id="footer"
+			class="widget-white">
+			<div class="container footer">
+				<div class="menu-wrap col-md-4">
+					<h4>메뉴 리스트</h4>
+					<nav>
+						<a href="">menu 1</a>
+						<a href="">menu 2</a>
+						<a href="">menu 3</a>
+						<a href="">menu 4</a>
+						<a href="">menu 5</a>
+					</nav>
+				</div>
+				<div class="menu-wrap col-md-4">
+					<h4>메뉴 리스트</h4>
+					<nav>
+						<a href="">menu 1</a>
+						<a href="">menu 2</a>
+						<a href="">menu 3</a>
+						<a href="">menu 4</a>
+						<a href="">menu 5</a>
+					</nav>
+				</div>
+				<div class="menu-wrap col-md-4">
+					<h4>메뉴 리스트</h4>
+					<nav>
+						<a href="">menu 1</a>
+						<a href="">menu 2</a>
+						<a href="">menu 3</a>
+						<a href="">menu 4</a>
+						<a href="">menu 5</a>
+					</nav>
+				</div>
+				<div class="menu-wrap col-md-4">
+					<h4>메뉴 리스트</h4>
+					<nav>
+						<a href="">menu 1</a>
+						<a href="">menu 2</a>
+						<a href="">menu 3</a>
+						<a href="">menu 4</a>
+						<a href="">menu 5</a>
+					</nav>
+				</div>
+			</div>
+		</footer>
+	</body>
 </html>