Index: vue/src/assets/images/devops/DevSupport/github.png
===================================================================
diff -u -rf7c308b840a823e68db4cf7c8e66c0dbe77db013 -r0076222ea9e3e3fcfb2cb9d1aeaa07209e653d23
--- vue/src/assets/images/devops/DevSupport/github.png	(.../github.png)	(revision f7c308b840a823e68db4cf7c8e66c0dbe77db013)
+++ vue/src/assets/images/devops/DevSupport/github.png	(.../github.png)	(revision 0076222ea9e3e3fcfb2cb9d1aeaa07209e653d23)
@@ -2494,7 +2494,7 @@
 }
 .section-title h2 {
 	text-align: center;
-	font-size: 32px;
+	font-size: 28px;
 	font-weight: bold;
 	text-transform: uppercase;
 	padding-bottom: 20px;
@@ -2519,7 +2519,7 @@
 	display: block;
 	width: 40px;
 	height: 3px;
-	background: #2477ff;
+	background: #5B617B;
 	bottom: 0;
 	left: calc(50% - 20px);
 }
@@ -2537,8 +2537,9 @@
 }
 
 .about h2 {
-	color: #666;
+	color: #5B617B;
 	margin-bottom: 7%;
+	padding-top: 20px;
 }
 .about .section-title {
 	margin-bottom: 8%;
Index: arms/html/pdService
===================================================================
diff -u -rc6b5b8b9ff09879d0ed4095199fae6e89d65ef95 -r0076222ea9e3e3fcfb2cb9d1aeaa07209e653d23
--- arms/html/pdService	(.../pdService)	(revision c6b5b8b9ff09879d0ed4095199fae6e89d65ef95)
+++ arms/html/pdService	(.../pdService)	(revision 0076222ea9e3e3fcfb2cb9d1aeaa07209e653d23)
@@ -183,6 +183,12 @@
                     margin-bottom: -24px;
                 }
             }
+            @media (max-width: 767px){
+                .carousel-concept {
+                    height: 250px !important;
+                    margin-bottom: -24px;
+                }
+            }
         </style>
         <script type="text/javascript" charset="utf-8">
             //<![CDATA[
@@ -242,12 +248,17 @@
 			<div class="navi-wrap">
 				<nav>
 					<a
-						href="#about"
+						href="#concept"
 						style="color: #a4c6ff; text-decoration: none">
 						<i class="fa fa-book"></i>
-						About
+						Concept
 					</a>
-
+                    <a
+                            href="#about"
+                            style="color: #a4c6ff; text-decoration: none">
+                        <i class="fa fa-book"></i>
+                        About
+                    </a>
 					<a
 						href="#contact"
 						style="color: #a4c6ff; text-decoration: none">
@@ -310,7 +321,7 @@
                                         <h1
                                             class="slide-one-header"
                                             style="font-size: 17px !important">
-                                            <strong>A-RMS</strong>
+                                            <span class="glyphicon glyphicon-info-sign" style="vertical-align: text-top;"></span> <strong>A-RMS</strong>
                                         </h1>
                                         <p style="font-size: 15px !important">
                                             <label style="font-weight: bold;">제품(서비스)</label>의 <label style="color:#a4c6ff; font-weight: bold;">요구사항</label>을
@@ -334,10 +345,9 @@
                                         <br />
                                         <br />
                                         <br />
-                                        <h1
-                                                class="slide-two-header"
-                                                style="font-size: 17px !important">
-                                            <strong>A-RMS</strong>
+                                        <h1 class="slide-one-header"
+                                            style="font-size: 17px !important">
+                                            <span class="glyphicon glyphicon-remove-circle"></span> <strong>A-RMS</strong>
                                         </h1>
                                         <p style="font-size: 15px !important">
                                             관리자는 <label style="font-weight: bold;">제품(서비스)</label>의 <label style="color:#a4c6ff; font-weight: bold;">요구사항을 관리</label>합니다.
@@ -361,10 +371,9 @@
                                         <br />
                                         <br />
                                         <br />
-                                        <h1
-                                                class="slide-three-header"
-                                                style="font-size: 17px !important">
-                                            <strong>A-RMS</strong>
+                                        <h1 class="slide-one-header"
+                                            style="font-size: 17px !important">
+                                            <span class="glyphicon glyphicon-plus-sign"></span> <strong>A-RMS</strong>
                                         </h1>
                                         <p style="font-size: 15px !important">
                                             개발자는 <label style="font-weight: bold;">제품(서비스)</label>의 <label style="color:#a4c6ff; font-weight: bold;">요구사항을 명확하게 알지 못합니다.</label>
@@ -373,9 +382,7 @@
                                             관리자는 <label style="color:#e5603b; font-weight: bold;">ALM 의 이슈 를 알지 못합니다.</label>
                                         </p>
                                         <br />
-                                        <div
-
-                                                class="btn btn-lg btn-white font13">
+                                        <div class="btn btn-lg btn-white font13">
                                             요구사항과 ISSUE 를 <label style="color:#e49400; font-weight: bold;">연결할 방법이 필요</label>합니다.
                                         </div>
                                     </div>
@@ -390,10 +397,9 @@
                                         <br />
                                         <br />
                                         <br />
-                                        <h1
-                                                class="slide-three-header"
-                                                style="font-size: 17px !important">
-                                            <strong>A-RMS</strong>
+                                        <h1 class="slide-one-header"
+                                            style="font-size: 17px !important">
+                                            <span class="glyphicon glyphicon-ok-sign"></span> <strong>A-RMS</strong>
                                         </h1>
                                         <p style="font-size: 15px !important">
                                             <label style="font-weight: bold;">제품(서비스)</label> 가 <label style="color:#a4c6ff; font-weight: bold;">언제 출시</label> 할 수 있는지
@@ -429,9 +435,99 @@
 				</div>
 			</div>
 		</div>
+        <div id="concept"
+             class="widget-white widget-concept about">
+            <div class="container">
+                <div class="section-title">
+                    <h2>Concept</h2>
+
+                    <div
+                            id="carousel-concept"
+                            class="carousel slide carousel-landing carousel-concept carousel-fade"
+                            data-ride="carousel">
+                        <ol class="carousel-indicators">
+                            <li
+                                    data-target="#carousel-concept"
+                                    data-slide-to="0"
+                                    class="active"></li>
+                            <li
+                                    data-target="#carousel-concept"
+                                    data-slide-to="1"
+                                    class=""></li>
+                            <li
+                                    data-target="#carousel-concept"
+                                    data-slide-to="2"
+                                    class=""></li>
+                            <li
+                                    data-target="#carousel-concept"
+                                    data-slide-to="2"
+                                    class=""></li>
+                        </ol>
+                        <div class="carousel-inner">
+                            <div class="item active">
+                                <div class="row">
+                                    <div class="col-xs-12">
+                                        <div class="text-align-center animated fadeInRightBig">
+                                            <img
+                                                    src="./img/index/arms_project_charter.drawio.png"
+                                                    alt="Second slide" />
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="item">
+                                <div class="row">
+                                    <div class="col-xs-12">
+                                        <div class="text-align-center animated fadeInRightBig">
+                                            <img
+                                                    src="./img/index/arms_srs.drawio.png"
+                                                    alt="Second slide" />
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="item">
+                                <div class="row">
+                                    <div class="col-xs-12">
+                                        <div class="text-align-center animated fadeInRightBig">
+                                            <img
+                                                    src="./img/index/arms_sds.drawio.png"
+                                                    alt="Second slide" />
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="item">
+                                <div class="row">
+                                    <div class="col-xs-12">
+                                        <div class="text-align-center animated fadeInRightBig">
+                                            <img src="./img/index/arms_project_endpoint.drawio.png"
+                                                 alt="Second slide" />
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <a
+                                class="left carousel-control carousel-control-landing"
+                                href="#carousel-concept"
+                                data-slide="prev">
+                            <span class="icon-prev"></span>
+                        </a>
+                        <a
+                                class="right carousel-control carousel-control-landing"
+                                href="#carousel-concept"
+                                data-slide="next">
+                            <span class="icon-next"></span>
+                        </a>
+                    </div>
+                </div>
+
+            </div>
+        </div>
 		<div
 			id="about"
-			class="widget widget-white widget-about about">
+			class="widget widget-about about">
 			<div class="container">
 				<div class="section-title">
 					<h2>About</h2>
@@ -541,7 +637,7 @@
 		</div>
 		<div
 			id="contact"
-			class="container contact">
+			class="widget-white widget-contact contact">
 			<div class="section-title">
 				<h2>Contact</h2>
 			</div>