init

dist/assets/assets/css/font.css

@@ -0,0 +1,62 @@
+@font-face {
+    font-family: 'Pretendard';
+    font-weight: 900;
+    font-display: swap;
+    src: local('Pretendard Black'), url(../fonts/woff2/Pretendard-Black.woff2) format('woff2'), url(../fonts/woff/Pretendard-Black.woff) format('woff');
+}
+
+@font-face {
+    font-family: 'Pretendard';
+    font-weight: 800;
+    font-display: swap;
+    src: local('Pretendard ExtraBold'), url(../fonts/woff2/Pretendard-ExtraBold.woff2) format('woff2'), url(../fonts/woff/Pretendard-ExtraBold.woff) format('woff');
+}
+
+@font-face {
+    font-family: 'Pretendard';
+    font-weight: 700;
+    font-display: swap;
+    src: local('Pretendard Bold'), url(../fonts/woff2/Pretendard-Bold.woff2) format('woff2'), url(../fonts/woff/Pretendard-Bold.woff) format('woff');
+}
+
+@font-face {
+    font-family: 'Pretendard';
+    font-weight: 600;
+    font-display: swap;
+    src: local('Pretendard SemiBold'), url(../fonts/woff2/Pretendard-SemiBold.woff2) format('woff2'), url(../fonts/woff/Pretendard-SemiBold.woff) format('woff');
+}
+
+@font-face {
+    font-family: 'Pretendard';
+    font-weight: 500;
+    font-display: swap;
+    src: local('Pretendard Medium'), url(../fonts/woff2/Pretendard-Medium.woff2) format('woff2'), url(../fonts/woff/Pretendard-Medium.woff) format('woff');
+}
+
+@font-face {
+    font-family: 'Pretendard';
+    font-weight: 400;
+    font-display: swap;
+    src: local('Pretendard Regular'), url(../fonts/woff2/Pretendard-Regular.woff2) format('woff2'), url(../fonts/woff/Pretendard-Regular.woff) format('woff');
+}
+
+@font-face {
+    font-family: 'Pretendard';
+    font-weight: 300;
+    font-display: swap;
+    src: local('Pretendard Light'), url(../fonts/woff2/Pretendard-Light.woff2) format('woff2'), url(../fonts/woff/Pretendard-Light.woff) format('woff');
+}
+
+@font-face {
+    font-family: 'Pretendard';
+    font-weight: 200;
+    font-display: swap;
+    src: local('Pretendard ExtraLight'), url(../fonts/woff2/Pretendard-ExtraLight.woff2) format('woff2'), url(../fonts/woff/Pretendard-ExtraLight.woff) format('woff');
+}
+
+@font-face {
+    font-family: 'Pretendard';
+    font-weight: 100;
+    font-display: swap;
+    src: local('Pretendard Thin'), url(../fonts/woff2/Pretendard-Thin.woff2) format('woff2'), url(../fonts/woff/Pretendard-Thin.woff) format('woff');
+}

dist/assets/assets/images/ecrew-logo.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="_레이어_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380.54 81.08"><defs><style>.cls-1,.cls-2,.cls-3{stroke-width:0px;}.cls-2{fill:#1d60ed;}.cls-3{fill:#872de3;}</style></defs><g id="Layer_1"><path class="cls-1" d="m44.29,79.63c-8.8,0-16.53-1.64-23.21-4.93-6.67-3.28-11.86-7.83-15.55-13.65C1.84,55.24,0,48.49,0,40.8c0-8.49,1.77-15.77,5.31-21.84,3.54-6.07,8.27-10.74,14.18-14.03C25.41,1.65,31.95,0,39.13,0c8.19,0,15.04,1.72,20.55,5.16,5.51,3.44,9.68,8.11,12.51,14.03,2.83,5.92,4.25,12.67,4.25,20.25,0,1.31-.08,2.86-.23,4.63-.15,1.77-.33,3.16-.53,4.17H24.72c.61,2.63,1.77,4.85,3.49,6.67,1.72,1.82,3.89,3.16,6.52,4.02,2.63.86,5.56,1.29,8.8,1.29h23.81v19.41h-23.06Zm-20.17-46.11h29.58c-.2-1.62-.51-3.19-.91-4.7-.41-1.52-1.04-2.86-1.9-4.02-.86-1.16-1.85-2.17-2.96-3.03-1.11-.86-2.4-1.54-3.87-2.05-1.47-.5-3.11-.76-4.93-.76-2.33,0-4.4.41-6.22,1.21-1.82.81-3.34,1.9-4.55,3.26-1.21,1.37-2.15,2.93-2.81,4.7-.66,1.77-1.14,3.56-1.44,5.38Z"/><path class="cls-1" d="m123.77,79.63c-8.09,0-15.27-1.69-21.54-5.08-6.27-3.39-11.22-7.99-14.86-13.8-3.64-5.81-5.46-12.46-5.46-19.95s1.82-14.13,5.46-19.95c3.64-5.81,8.59-10.44,14.86-13.88,6.27-3.44,13.45-5.16,21.54-5.16h11.68v19.87h-10.77c-3.94,0-7.33.83-10.16,2.5-2.83,1.67-5.03,3.94-6.6,6.83-1.57,2.88-2.35,6.14-2.35,9.78s.78,6.9,2.35,9.78c1.57,2.88,3.77,5.16,6.6,6.83,2.83,1.67,6.22,2.5,10.16,2.5h10.77v19.72h-11.68Z"/><path class="cls-1" d="m143.33,79.63V24.72c0-7.08,2.02-12.64,6.07-16.68s9.66-6.07,16.84-6.07h22.6v19.11h-16.84c-1.42,0-2.63.48-3.64,1.44-1.01.96-1.52,2.2-1.52,3.72v53.39h-23.51Z"/><path class="cls-1" d="m235.4,79.63c-8.8,0-16.53-1.64-23.21-4.93-6.67-3.28-11.86-7.83-15.55-13.65-3.69-5.81-5.54-12.56-5.54-20.25,0-8.49,1.77-15.77,5.31-21.84,3.54-6.07,8.27-10.74,14.18-14.03,5.92-3.28,12.46-4.93,19.64-4.93,8.19,0,15.04,1.72,20.55,5.16,5.51,3.44,9.68,8.11,12.51,14.03,2.83,5.92,4.25,12.67,4.25,20.25,0,1.31-.08,2.86-.23,4.63-.15,1.77-.33,3.16-.53,4.17h-50.96c.61,2.63,1.77,4.85,3.49,6.67,1.72,1.82,3.89,3.16,6.52,4.02,2.63.86,5.56,1.29,8.8,1.29h23.81v19.41h-23.05Zm-20.17-46.11h29.58c-.2-1.62-.51-3.19-.91-4.7-.41-1.52-1.04-2.86-1.9-4.02-.86-1.16-1.85-2.17-2.96-3.03-1.11-.86-2.4-1.54-3.87-2.05-1.47-.5-3.11-.76-4.93-.76-2.33,0-4.4.41-6.22,1.21-1.82.81-3.34,1.9-4.55,3.26-1.21,1.37-2.15,2.93-2.81,4.7-.66,1.77-1.14,3.56-1.44,5.38Z"/><path class="cls-1" d="m305.12,81.08c-6.16,0-11.64-1.28-16.46-3.84-4.82-2.56-8.62-6.17-11.4-10.84-2.78-4.67-4.17-10.23-4.17-16.68v-21.94h20.8v22.27c0,2.45.46,4.62,1.39,6.51.93,1.89,2.22,3.39,3.89,4.5,1.67,1.11,3.65,1.67,5.95,1.67s4.3-.56,6.01-1.67c1.71-1.11,3-2.61,3.89-4.5.89-1.89,1.33-4.06,1.33-6.51v-22.27h21.02v22.27c0,2.45.45,4.62,1.33,6.51.89,1.89,2.19,3.39,3.89,4.5,1.7,1.11,3.71,1.67,6.01,1.67s4.28-.56,5.95-1.67c1.67-1.11,2.96-2.61,3.89-4.5.93-1.89,1.39-4.06,1.39-6.51V1.77h20.69v47.94c0,6.45-1.37,12.01-4.12,16.68-2.74,4.67-6.51,8.29-11.29,10.84-4.78,2.56-10.29,3.84-16.52,3.84-2.97,0-5.78-.33-8.45-1-2.67-.67-5.12-1.63-7.34-2.89-2.22-1.26-4.23-2.78-6.01-4.56-1.78,1.71-3.78,3.21-6.01,4.5-2.22,1.3-4.65,2.28-7.29,2.95-2.63.67-5.43,1-8.4,1Z"/><circle class="cls-2" cx="283.53" cy="11.08" r="10.44"/><circle class="cls-3" cx="327.53" cy="11.08" r="10.44"/></g></svg>

dist/assets/assets/images/logo-favicon.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="_레이어_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45.27 48.68"><defs><style>.cls-1{fill:#219be4;}.cls-1,.cls-2,.cls-3,.cls-4,.cls-5,.cls-6{stroke-width:0px;}.cls-2{fill:#1a2bc3;}.cls-3{fill:#3f60c1;}.cls-4{fill:#2264dc;}.cls-5{fill:#5a82fb;}.cls-6{fill:#4ab7f2;}</style></defs><g id="Layer_1"><polygon class="cls-6" points="22.69 18.15 22.69 30.81 0 26.7 0 22.16 22.69 18.15"/><polygon class="cls-1" points="22.69 18.15 22.69 30.81 37.74 27.79 37.74 21.07 22.69 18.15"/><polygon class="cls-5" points="22.69 0 22.69 12.87 45.27 17.2 45.27 12.14 22.69 0"/><polygon class="cls-3" points="22.64 0 22.64 12.87 7.69 15.02 7.69 8.86 22.64 0"/><polygon class="cls-4" points="22.69 48.68 22.69 35.81 45.27 31.48 45.27 36.55 22.69 48.68"/><polygon class="cls-2" points="22.64 48.68 22.64 35.81 7.69 33.66 7.69 39.82 22.64 48.68"/></g></svg>

dist/assets/assets/images/logo.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="_레이어_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 306.35 48.68"><defs><style>.cls-1{fill:#219be4;}.cls-1,.cls-2,.cls-3,.cls-4,.cls-5,.cls-6,.cls-7{stroke-width:0px;}.cls-2{fill:#1a2bc3;}.cls-4{fill:#3f60c1;}.cls-5{fill:#2264dc;}.cls-6{fill:#5a82fb;}.cls-7{fill:#4ab7f2;}</style></defs><g id="Layer_1"><path class="cls-3" d="m56.58,10.22h22.38v5.84h-15.66v6.13h14.37v5.84h-14.37v6.46h15.99v5.84h-22.72V10.22Z"/><path class="cls-3" d="m83.8,10.22h11.67c9.97,0,16.14,6.17,16.14,15.07s-6.17,15.03-16.14,15.03h-11.67V10.22Zm11.78,24.16c5.76,0,9.31-3.29,9.31-9.09s-3.55-9.12-9.31-9.12h-5.06v18.21h5.06Z"/><path class="cls-3" d="m115.27,10.22h6.72v16.77c0,4.8,2.66,8.02,7.06,8.02s7.05-3.21,7.05-8.02V10.22h6.72v16.77c0,8.53-5.51,14.07-13.78,14.07s-13.78-5.54-13.78-14.07V10.22Z"/><path class="cls-3" d="m187.37,10.22l-8.68,30.11h-6.8l-5.39-18.88-5.39,18.88h-6.79l-8.68-30.11h7.2l5.17,19.69,5.17-19.69h6.98l5.13,19.61,5.21-19.61h6.87Z"/><path class="cls-3" d="m188.35,25.25c0-9.12,6.91-15.81,16.25-15.81s16.25,6.69,16.25,15.81-6.91,15.81-16.25,15.81-16.25-6.68-16.25-15.81Zm25.78,0c0-5.69-4.06-9.75-9.53-9.75s-9.53,4.06-9.53,9.75,4.06,9.75,9.53,9.75,9.53-4.1,9.53-9.75Z"/><path class="cls-3" d="m242.76,40.33l-5.84-9.49h-5.36v9.49h-6.72V10.22h12.12c7.65,0,12.12,4.06,12.12,10.3,0,4.14-1.96,7.31-5.5,8.98l6.98,10.82h-7.79Zm-11.19-15.44h5.1c3.55,0,5.69-1.51,5.69-4.36s-2.14-4.36-5.69-4.36h-5.1v8.72Z"/><path class="cls-3" d="m264.47,28.84l-4.1,4.73v6.76h-6.72V10.22h6.72v14.18l12.04-14.18h8.24l-11.82,13.63,12.45,16.48h-8.38l-8.42-11.49Z"/><path class="cls-3" d="m306.24,19.31h-6.95c-.41-2.62-2.36-4.21-5.58-4.21s-4.88,1.26-4.88,3.07c0,2.25,2.33,3.03,8.2,4.25,6.95,1.44,9.31,4.88,9.31,9.38,0,5.76-5.43,9.27-12.15,9.27-7.43,0-12.86-4.02-13.15-10.45h6.91c.37,2.88,2.88,4.8,6.72,4.8,2.73,0,4.77-1.37,4.77-3.32,0-2.4-2.03-3.36-7.39-4.36-6.54-1.22-10.08-3.92-10.08-9.57s5.39-8.68,12.19-8.68,11.75,4.1,12.08,9.82Z"/><polygon class="cls-7" points="22.69 18.15 22.69 30.81 0 26.7 0 22.16 22.69 18.15"/><polygon class="cls-1" points="22.69 18.15 22.69 30.81 37.74 27.79 37.74 21.07 22.69 18.15"/><polygon class="cls-6" points="22.69 0 22.69 12.87 45.27 17.2 45.27 12.14 22.69 0"/><polygon class="cls-4" points="22.64 0 22.64 12.87 7.69 15.02 7.69 8.86 22.64 0"/><polygon class="cls-5" points="22.69 48.68 22.69 35.81 45.27 31.48 45.27 36.55 22.69 48.68"/><polygon class="cls-2" points="22.64 48.68 22.64 35.81 7.69 33.66 7.69 39.82 22.64 48.68"/></g></svg>

dist/assets/assets/images/onadn-logo.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="_레이어_2" data-name="레이어 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 123.1 24.86">
+  <defs>
+    <style>
+      .cls-1, .cls-2 {
+        stroke-width: 0px;
+      }
+
+      .cls-2 {
+        fill: #d93940;
+      }
+    </style>
+  </defs>
+  <g id="_레이어_1-2" data-name="레이어 1">
+    <path class="cls-1" d="M104.7,24.82c-1,0-1.9-.8-1.9-1.9V1.92c0-.8.5-1.5,1.3-1.8.7-.3,1.6,0,2.1.6l13.1,16.7V2.52c0-1,.8-1.9,1.9-1.9,1,0,1.9.8,1.9,1.9v20.3c0,.8-.5,1.5-1.3,1.8-.7.3-1.6,0-2.1-.6l-13.2-16.7v15.6c0,1-.8,1.9-1.8,1.9Z"/>
+    <path class="cls-1" d="M72.7,24.82c-.7,0-1.4-.4-1.7-1.2l-7-16.8-6.9,16.9c-.4.9-1.5,1.4-2.4,1s-1.4-1.5-1-2.4L62.4,1.32c.3-.7,1-1.1,1.7-1.1.8,0,1.4.5,1.7,1.1l8.7,21c.4.9-.1,2-1,2.4-.3,0-.6.1-.8.1Z"/>
+    <path class="cls-1" d="M86.1,24.82h-5.7c-1,0-1.9-.8-1.9-1.9V1.92c0-1,.8-1.9,1.9-1.9h5.7c6.8,0,12.4,5.5,12.4,12.4s-5.6,12.4-12.4,12.4ZM82.3,21.12h3.8c4.8,0,8.7-3.9,8.7-8.7s-3.9-8.7-8.7-8.7h-3.8v17.4Z"/>
+    <g>
+      <path class="cls-2" d="M31.1,24.82c-1,0-1.9-.8-1.9-1.9V1.92c0-.8.5-1.5,1.2-1.8.7-.3,1.6,0,2.1.6l13.1,16.7V2.52c0-1,.8-1.9,1.9-1.9,1,0,1.9.8,1.9,1.9v20.3c0,.8-.5,1.5-1.2,1.8s-1.6,0-2.1-.6l-13.1-16.7v15.6c0,1-.9,1.9-1.9,1.9Z"/>
+      <path class="cls-2" d="M12.4,24.82C5.6,24.82,0,19.22,0,12.42c0-.8.1-1.6.3-2.5.2-1,1.2-1.6,2.2-1.4,1,.2,1.6,1.2,1.4,2.2-.1.6-.2,1.2-.2,1.7,0,4.8,3.9,8.7,8.7,8.7s8.7-3.9,8.7-8.7S17.2,3.72,12.4,3.72c-.5,0-1.1.1-1.6.2-1,.2-2-.4-2.2-1.5-.2-1,.4-2,1.4-2.2.8-.2,1.6-.2,2.4-.2C19.2.02,24.8,5.52,24.8,12.42c0,6.8-5.6,12.4-12.4,12.4Z"/>
+      <path class="cls-2" d="M7,5.02c0,1.1-.9,2-2,2s-2-.9-2-2,.9-2,2-2,2,.9,2,2Z"/>
+    </g>
+  </g>
+</svg>

dist/assets/assets/images/wheeparam2-logo.svg

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="_레이어_2" data-name="레이어 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640.99 65.38">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #000001;
+      }
+
+      .cls-1, .cls-2 {
+        stroke-width: 0px;
+      }
+
+      .cls-2 {
+        fill: #43b6a2;
+      }
+    </style>
+  </defs>
+  <g id="Layer_1" data-name="Layer 1">
+    <g>
+      <path class="cls-2" d="M121.85,15.52h6.32l-9.87,34.34-9.23-.05-5.53-22.6-5.48,22.6-9.28.05-9.82-34.34h6.32l8.34,27.93,6.96-27.93h5.97l6.91,27.93,8.39-27.93Z"/>
+      <path class="cls-2" d="M170.3,49.86h-6.66v-14.06h-20.92v14.06h-6.66V15.52h6.66v14.11h20.92v-14.11h6.66v34.34Z"/>
+      <path class="cls-2" d="M208.4,21.19h-23.44v8.39h19.34v6.22h-19.34v8.44h23.44v5.63h-30.2V15.52h30.2v5.67Z"/>
+      <path class="cls-2" d="M246.49,21.19h-23.44v8.39h19.34v6.22h-19.34v8.44h23.44v5.63h-30.2V15.52h30.2v5.67Z"/>
+      <path class="cls-2" d="M287.1,33.23c0,1.74-.62,3.24-1.87,4.49-1.25,1.25-2.76,1.87-4.54,1.87h-19.64v10.26h-6.66V15.52h26.3c1.78,0,3.29.63,4.54,1.9,1.25,1.27,1.87,2.77,1.87,4.51v11.3ZM278.91,33.48c.56,0,1.04-.21,1.43-.62.4-.41.59-.9.59-1.46v-7.65c0-.59-.2-1.09-.59-1.48-.39-.4-.87-.59-1.43-.59h-17.86v11.79h17.86Z"/>
+      <path class="cls-2" d="M317.94,44.19h-19.98l-2.52,5.67h-6.46l14.46-34.34h9.03l14.46,34.34h-6.41l-2.57-5.67ZM307.97,19.81l-7.4,18.85h14.75l-7.35-18.85Z"/>
+      <path class="cls-2" d="M358.25,49.86l-6.86-10.26h-11.94v10.26h-6.66V15.52h27.34c1.78,0,3.29.63,4.54,1.9,1.25,1.27,1.87,2.77,1.87,4.51v11.3c0,1.65-.55,3.07-1.65,4.27-1.1,1.2-2.46,1.9-4.07,2.1l-2.12.2,6.71,10.07h-7.15ZM339.45,21.69v11.79h18.9c.56,0,1.04-.21,1.43-.62.39-.41.59-.9.59-1.46v-7.65c0-.59-.2-1.09-.59-1.48-.4-.4-.87-.59-1.43-.59h-18.9Z"/>
+      <path class="cls-2" d="M401.28,44.19h-19.98l-2.52,5.67h-6.46l14.46-34.34h9.03l14.46,34.34h-6.41l-2.57-5.67ZM391.31,19.81l-7.4,18.85h14.75l-7.35-18.85Z"/>
+      <path class="cls-2" d="M457.98,49.86h-6.66v-21.61l-10.36,21.61h-7.8l-10.36-21.61v21.61h-6.66V15.52l7.6.05,13.32,28.27,13.32-28.32h7.6v34.34Z"/>
+    </g>
+    <path class="cls-1" d="M552.66,15.52c2.07,0,3.85.74,5.33,2.22,1.48,1.48,2.22,3.26,2.22,5.33v19.24c0,2.07-.74,3.85-2.22,5.33-1.48,1.48-3.26,2.22-5.33,2.22h-22.3c-2.11,0-3.89-.74-5.35-2.22s-2.2-3.26-2.2-5.33v-19.24c0-2.07.73-3.85,2.2-5.33s3.25-2.22,5.35-2.22h22.3ZM554.04,40.58v-15.79c0-.85-.3-1.59-.91-2.2-.61-.61-1.34-.91-2.2-.91h-18.9c-.85,0-1.59.3-2.2.91-.61.61-.91,1.34-.91,2.2v15.79c0,.86.3,1.59.91,2.2.61.61,1.34.91,2.2.91h18.9c.85,0,1.59-.3,2.2-.91.61-.61.91-1.34.91-2.2Z"/>
+    <path class="cls-1" d="M594.7,30.17v5.72h-19.84v13.96h-6.76V15.52h30.74v5.67h-23.98v8.98h19.84Z"/>
+    <path class="cls-1" d="M640.99,15.52v6.17h-13.82v28.18h-6.66v-28.18h-13.82v-6.17h34.29Z"/>
+    <path class="cls-1" d="M513.26,31.53c-1.1-1.1-2.43-1.65-3.97-1.65h-23.49c-.3,0-.56-.11-.79-.32-.23-.21-.35-.48-.35-.81v-4.88c0-.59.21-1.09.64-1.5.43-.41.94-.62,1.53-.62h28.05v-6.22h-29.93c-1.78,0-3.29.63-4.54,1.9-1.25,1.27-1.87,2.79-1.87,4.56v7.89c0,1.55.55,2.87,1.65,3.97,1.1,1.1,2.43,1.65,3.97,1.65h23.44c.33,0,.6.12.81.35.21.23.32.49.32.79v4.84c0,.53-.13.97-.4,1.33-.43.56-.97.84-1.63.84l-15.71.04h-12.43v6.16h6.21c.06,0,.11.02.17.02l23.59-.05c1.74,0,3.24-.63,4.49-1.9,1.25-1.27,1.87-2.79,1.87-4.56v-7.85c0-1.55-.55-2.87-1.65-3.97Z"/>
+    <polygon class="cls-2" points="53.84 21.62 53.84 13.81 27.02 29.3 27.02 51.09 33.22 47.48 47.08 39.49 47.08 46.02 29.31 56.27 27.02 57.6 20.4 53.78 20.4 26.74 36.96 17.18 30.19 13.27 13.64 22.83 13.64 49.88 6.76 45.91 6.76 20.75 35.89 3.93 29.09 0 0 16.84 0 42.01 0 49.83 6.76 53.72 6.76 53.72 23.69 63.46 23.69 63.46 27.02 65.38 27.02 65.38 27.02 65.38 53.84 49.93 53.84 27.78 33.78 39.35 33.78 33.2 53.84 21.62"/>
+  </g>
+</svg>

dist/index.html

@@ -3,8 +3,39 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
-    <title>메인 페이지</title>
-    <link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/notosanskr.css">
+    <title>에듀웍스 - 매출을 높이는 전문 교육컨설팅 서비스!</title>
+    <meta http-equiv="Expires" content="-1">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Cache-Control" content="no-cache">
+    <meta name="description" content="에듀웍스에서는 브랜딩기획, 교육, 평가, 성과까지 교육훈련에 필요한 모든 솔루션을 제공합니다.">
+    <meta name="keywords" content="훈련기관 브랜딩, 훈련기관 설립, 훈련기관 운영, 훈련기관 인증평가, 직업룬련 과정심사, 특화훈련 심사평가, 훈련기관 역량제고, 훈련과정 품질제고, 훈련생 역량관리, 전담인력 채용, 취업지원 컨설팅, 종합컨설팅TF">
+    <meta property="og:type" content="website">
+    <meta property="og:title" content="에듀웍스">
+    <meta property="og:description" content="에듀웍스에서는 브랜딩기획, 교육, 평가, 성과까지 교육훈련에 필요한 모든 솔루션을 제공합니다.">
+    <meta property="og:image" content="http://jjkimhk2.cafe24.com/assets/images/share-img.jpg">
+    <meta property="og:url" content="http://jjkimhk2.cafe24.com">
+    <link rel="canonical" href="http://jjkimhk2.cafe24.com">
+    <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
+    <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
+    <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
+    <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
+    <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
+    <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
+    <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
+    <link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+    <link rel="manifest" href="/manifest.json">
+    <meta name="msapplication-TileColor" content="#ffffff">
+    <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
+    <meta name="theme-color" content="#ffffff">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400;600&display=swap" rel="stylesheet">
+    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
     <link rel="stylesheet" href="./assets/css/style.min.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
     <script src="./assets/js/common.min.js"></script>
@@ -18,17 +49,806 @@
 <!--E: 숨김 메뉴-->
 
 <!--S: 헤더 영역-->
+<header class="main-header">
+    <div class="container">
+        <div class="logo" style="">
+            <a href="index.html" class="logo-img">에듀웍스</a>
+        </div>
 
+        <div class="nav-container">
+            <nav class="gnb-nav main-nav" id="main-nav">
+                <div class="nav-header">에듀웍스</div>
+                <ul class="gnb-nav-wrap">
+                    <li>
+                        <a href="javascript:;" data-target=".main-banner" data-button="btn-animate-move" data-offset="100" class="en">홈</a>
+                    </li>
+                    <li>
+                        <a href="javascript:;" data-target=".why-reason" data-button="btn-animate-move" class="en">NOW! 에듀웍스</a>
+                    </li>
+                    <li>
+                        <a href="javascript:;" data-target=".service-info" data-button="btn-animate-move" class="en">에듀스토어</a>
+                    </li>
+
+                    <li>
+                        <a href="javascript:;" data-target=".clients-info" data-button="btn-animate-move" class="en">에듀파트너</a>
+                    </li>
+
+                    <li>
+                        <a href="javascript:;" data-target=".inquiry-form" data-button="btn-animate-move" class="en">상담요청</a>
+                    </li>
+                </ul>
+            </nav>
+        </div>
+
+        <button id="burger" class="open-main-nav">
+            <span class="burger"></span>
+            <span class="burger-text">Menu</span>
+        </button>
+    </div>
+</header>
 <!--E: 헤더 영역-->
 
 <!--S: 컨텐츠 영역-->
 <section id="contents">
 
+<section class="main-banner">
+    <div id="bg-wrap">
+        <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">
+            <defs>
+                <radialGradient id="Gradient1" cx="50%" cy="50%" fx="0.441602%" fy="50%" r=".5"><animate attributeName="fx" dur="34s" values="0%;3%;0%" repeatCount="indefinite"></animate><stop offset="0%" stop-color="rgba(50, 248, 255, 1)"></stop><stop offset="100%" stop-color="rgba(70, 54, 255, 0)"></stop></radialGradient>
+                <radialGradient id="Gradient2" cx="50%" cy="50%" fx="2.68147%" fy="50%" r=".5"><animate attributeName="fx" dur="23.5s" values="0%;3%;0%" repeatCount="indefinite"></animate><stop offset="0%" stop-color="rgba(70, 54, 255, 1)"></stop><stop offset="100%" stop-color="rgba(255, 255, 0, 0)"></stop></radialGradient>
+                <radialGradient id="Gradient3" cx="50%" cy="50%" fx="0.836536%" fy="50%" r=".5"><animate attributeName="fx" dur="21.5s" values="0%;3%;0%" repeatCount="indefinite"></animate><stop offset="0%" stop-color="rgba(0, 255, 255, 1)"></stop><stop offset="100%" stop-color="rgba(0, 255, 255, 0)"></stop></radialGradient>
+                <radialGradient id="Gradient4" cx="50%" cy="50%" fx="4.56417%" fy="50%" r=".5"><animate attributeName="fx" dur="23s" values="0%;5%;0%" repeatCount="indefinite"></animate><stop offset="0%" stop-color="rgba(0, 255, 0, 1)"></stop><stop offset="100%" stop-color="rgba(50, 248, 255, 0)"></stop></radialGradient>
+                <radialGradient id="Gradient5" cx="50%" cy="50%" fx="2.65405%" fy="50%" r=".5"><animate attributeName="fx" dur="24.5s" values="0%;5%;0%" repeatCount="indefinite"></animate><stop offset="0%" stop-color="rgba(70,54,255, 1)"></stop><stop offset="100%" stop-color="rgba(0,0,255, 0)"></stop></radialGradient>
+                <radialGradient id="Gradient6" cx="50%" cy="50%" fx="0.981338%" fy="50%" r=".5"><animate attributeName="fx" dur="25.5s" values="0%;5%;0%" repeatCount="indefinite"></animate><stop offset="0%" stop-color="rgba(255,0,0, 1)"></stop><stop offset="100%" stop-color="rgba(255,0,0, 0)"></stop></radialGradient>
+            </defs>
+            <rect x="13.744%" y="1.18473%" width="100%" height="100%" fill="url(#Gradient1)" transform="rotate(334.41 50 50)"><animate attributeName="x" dur="12s" values="25%;0%;25%" repeatCount="indefinite"></animate><animate attributeName="y" dur="12s" values="0%;25%;0%" repeatCount="indefinite"></animate><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="7s" repeatCount="indefinite"></animateTransform></rect>
+            <rect x="-2.17916%" y="35.4267%" width="100%" height="100%" fill="url(#Gradient2)" transform="rotate(255.072 50 50)"><animate attributeName="x" dur="24s" values="-25%;0%;-25%" repeatCount="indefinite"></animate><animate attributeName="y" dur="24s" values="0%;50%;0%" repeatCount="indefinite"></animate><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="12s" repeatCount="indefinite"></animateTransform>
+            </rect>
+            <rect x="9.00483%" y="14.5733%" width="100%" height="100%" fill="url(#Gradient3)" transform="rotate(139.903 50 50)"><animate attributeName="x" dur="12s" values="0%;25%;0%" repeatCount="indefinite"></animate><animate attributeName="y" dur="12s" values="0%;25%;0%" repeatCount="indefinite"></animate><animateTransform attributeName="transform" type="rotate" from="360 50 50" to="0 50 50" dur="9s" repeatCount="indefinite"></animateTransform>
+            </rect>
+        </svg>
+    </div>
+    <div class="main-top-text">
+        <h2 class="--title">
+            <small>
+                품격 있는 경호, INTELLIGENCE가 만듭니다.
+            </small>
+            <span class="animation">Professional Protection <br>with Class.</span>
+        </h2>
+        <p class="--sub-text">
+            중요한 순간일수록 더 정교한 보안이 필요합니다. <br>
+            행사, VIP, 기업 맞춤 경호 솔루션을 제공합니다.
+        </p>
+    </div>
+</section>
+
+<section class="why-reason section">
+    <div class="container">
+        <div class="title-wrap">
+            <span class="--title-deco">NOW! Eduworks</span>
+            <h2 class="--title">왜 직업교육 컨설팅은 에듀웍스 일까요?</h2>
+            <p class="--sub-text">직업훈련기관이 미래에 대비하고 최고 수준의 교육을 제공하는 데 도움을 드릴 것입니다!</p>
+        </div>
+        <ul class="contents-wrap reason-list">
+            <li class="reason-box">
+                <h3 class="--title MB10">
+                    <span class="icon material-symbols-outlined">data_table</span>
+                    <span>전문성과 풍부한 경험!</span>
+                </h3>
+                <p class="--sub-text">
+                    저희 업체는 다양한 직업 훈련 및 교육 분야에서 다년간의 경험을 쌓아왔습니다.
+                    우리의 전문가들은 교육 현장에서의 독보적인 전문 지식과 풍부한 경험을 바탕으로
+                    귀하의 기관에 최적화된 솔루션을 제공할 것입니다.
+                </p>
+            </li>
+            <li class="reason-box">
+                <h3 class="--title MB10">
+                    <span class="icon material-symbols-outlined">touch_app</span>
+                    <span>기관 맞춤형 솔루션 제공!</span>
+                </h3>
+                <p class="--sub-text">
+                    직업훈련기관은 고유한 특성과 요구에 맞춰 맞춤형 교육 솔루션을 필요로 합니다.
+                    우리는 귀하의 특별한 요구사항을 고려하여 개별화된 컨설팅을 제공하며,
+                    효과적인 교육 프로그램 구축을 도와드립니다.
+                </p>
+            </li>
+            <li class="reason-box">
+                <h3 class="--title MB10">
+                    <span class="icon material-symbols-outlined">query_stats</span>
+                    <span>효율적 운영과 이윤 극대화!</span>
+                </h3>
+                <p class="--sub-text">
+                    저희가 제공하는 컨설팅은 귀하의 훈련기관이 효율적으로 운영되도록 돕는 동시에 이윤을 창출할 수 있는 방안을
+                    모색 합니다. 이는 기관의 지속 가능성과 경제적 효과를 극대화할 수 있도록 지원합니다.
+                </p>
+            </li>
+            <li class="reason-box">
+                <h3 class="--title">
+                    <span class="icon material-symbols-outlined">work_history</span>
+                    <span>미래형 혁신과 신기술 도입!</span>
+                </h3>
+                <p class="--sub-text">
+                    빠르게 진화하는 교육 환경에서는 혁신과 기술의 도입이 필수입니다.
+                    우리는 귀하의 기관이 최신 교육 기술과 혁신을 효과적으로 적용하고,
+                    학생들에게 미래 지식과 기술을 제공할 수 있도록 돕습니다
+                </p>
+            </li>
+        </ul>
+    </div>
+</section>
+
+<section class="service-info section gray-back">
+    <div class="container">
+        <div class="title-wrap text-center">
+            <span class="--title-deco">Edu Store</span>
+            <h3 class="--title">고객중심 START-to-END 교육서비스</h3>
+            <p class="--sub-text">고객의 요구와 기대에 부합하면서 시작부터 끝까지 효과적이고, <br class="device-mobile">만족스러운 최적화된 교육 서비스를 제공합니다!</p>
+        </div>
+        <ul class="contents-wrap service-list MT125">
+            <li class="--service-item">
+                <div class="text">
+                    <div class="--item-category flex-box">
+                        <h4 class="--big-title">스타트업 파트너 <span class="--en-deco">Startup Partners</span></h4>
+                        <p class="--list-text">
+                            고용노동부로부터 훈련비를 지원받으면서 직업훈련을 운영하고자 계획하고 계신가요? <br>
+                            직업훈련이 처음인 기관을 위한 직업능력개발훈련기관 브랜딩기획‧설립‧운영까지 <br>
+                            단계별 모든 준비를 도와드립니다.
+                        </p>
+                        <button type="button" class="btn-more" data-btn="list-more" data-target=".service-item01">자세히 보기 <span class="material-symbols-outlined">expand_more</span></button>
+                    </div>
+
+                    <ul class="--item-detail-list flex-box MT50 service-item01">
+                        <li class="--item-detail">
+                            <div class="img-box">
+                                <img src="assets/images/service-img01.png" alt="">
+                                <h5 class="--title MB10 text-center">훈련기관 <br>브랜딩</h5>
+                            </div>
+                            <ol class="--list">
+                                <li class="--sub-text">고용노동부 직업훈련 기관 설립을 위한 <br>사업 타당성 검토 및 분석</li>
+                                <li class="--sub-text">산업/지역 단위 훈련수요 분석 및 훈련기관 강점에 <br>기반한 훈련기관 차별화 및 특성화 전략 수립</li>
+                                <li class="--sub-text">직업훈련기관 설립 및 운영에 필요한 세부계획 수립 <br>
+                                    <small> 훈련분야, 훈련인프라, 투입예산, 매출계획 등</small>
+                                </li>
+                            </ol>
+                        </li>
+                        <li class="--item-detail">
+                            <div class="img-box">
+                                <img src="assets/images/service-img02.png" alt="">
+                                <h5 class="--title MB10 text-center">훈련기관 <br>설립</h5>
+                            </div>
+                            <ol class="--list">
+                                <li class="--sub-text">훈련기관(학원, 직업능력개발훈련시설, 평생교육시설 등) 설립유형에 따른 장단점 분석</li>
+                                <li class="--sub-text">훈련기관 유형별 설립 절차 안내 및 고용노동부 인가 <br>
+                                    <small>훈련기관 인증, 실시가능직종, NCS 확인강사 등</small>
+                                </li>
+                                <li class="--sub-text">설립자 및 운영 직원에 대한 교육 및 훈련 프로그램 제공</li>
+                            </ol>
+                        </li>
+                        <li class="--item-detail">
+                            <div class="img-box">
+                                <img src="assets/images/service-img03.png" alt="">
+                                <h5 class="--title MB10 text-center">훈련기관 <br>운영</h5>
+                            </div>
+                            <ol class="--list">
+                                <li class="--sub-text">훈련수요자 요구기반 훈련과정 개발 및 운영 계획 수립</li>
+                                <li class="--sub-text">훈련과정 인정부터 운영 및 결과보고까지 <br>교육훈련 운영 실무 지원</li>
+                                <li class="--sub-text">교육훈련 운영 가이드 및 각종 매뉴얼(서식/자료) 제공</li>
+                                <li class="--sub-text">직업훈련 정책, 제도, 규정, 지침 등에 대한 지속적인 정보제공 및 교육</li>
+                            </ol>
+                        </li>
+                    </ul>
+                </div>
+            </li>
+            <li class="--service-item MT125">
+                <div class="text">
+                    <div class="--item-category flex-box">
+                        <h4 class="--big-title">에듀 엑스퍼트 <span class="--en-deco">Education Experts</span></h4>
+                        <p class="--list-text">
+                            직업능력개발훈련을 운영하는 훈련기관을 대상으로 맞춤형 컨설팅을 실시하여 훈련기관 인증평가와 <br>
+                            훈련과정 심사에 대한 부담을 해소하고 훈련기관의 실질적인 역량강화와 양질의  <br>
+                            직업훈련과정 개발을 지원합니다.
+                        </p>
+                        <button type="button" class="btn-more" data-btn="list-more" data-target=".service-item02">자세히 보기 <span class="material-symbols-outlined">expand_more</span></button>
+                    </div>
+
+                    <ul class="--item-detail-list flex-box MT50 service-item02">
+                        <li class="--item-detail">
+                            <div class="img-box">
+                                <img src="assets/images/service-img04.png" alt="">
+                                <h5 class="--title MB10 text-center">훈련기관 <br>인증평가</h5>
+                            </div>
+                            <ol class="--list">
+                                <li class="--sub-text">기관평가 개요, 심사절차, 평가지표, 운영체계, 훈련기관 준비사항</li>
+                                <li class="--sub-text">평가참여신청서 및 자체평가보고서 작성</li>
+                                <li class="--sub-text">훈련성과평가 및 현장평가 매뉴얼(서식) 제공 및 준비</li>
+                                <li class="--sub-text">베스트직업훈련기관(BHA) 공모 심사 특화사업 컨셉 설정</li>
+                                <li class="--sub-text">베스트직업훈련기관(BHA) 계획 및 우수 실적 보고서 작성(서면평가/발표평가)</li>
+                            </ol>
+                        </li>
+                        <li class="--item-detail">
+                            <div class="img-box">
+                                <img src="assets/images/service-img05.png" alt="">
+                                <h5 class="--title MB10 text-center">직업훈련 <br>과정심사</h5>
+                            </div>
+                            <ol class="--list">
+                                <li class="--sub-text">과정심사 개요, 심사절차, 평가지표, 운영체계, 훈련기관 준비사항</li>
+                                <li class="--sub-text">기관특성화 전략에 맞춘 주력 훈련분야 타당성 검토 및 선정</li>
+                                <li class="--sub-text">훈련수요 및 훈련성과 분석을 통한 훈련과정 개발</li>
+                                <li class="--sub-text">훈련과정(국가기간전략산업직종, 계좌제훈련, 사업주훈련) 심사 신청</li>
+                            </ol>
+                        </li>
+                        <li class="--item-detail">
+                            <div class="img-box">
+                                <img src="assets/images/service-img06.png" alt="">
+                                <h5 class="--title MB10 text-center">특화훈련 <br>심사평가</h5>
+                            </div>
+                            <ol class="--list">
+                                <li class="--sub-text">K-디지털 트레이닝 <br>
+                                    <small>K-디지털 트레이닝 훈련과정 심사 및 성과관리</small>
+                                </li>
+                                <li class="--sub-text">특화심사<br>
+                                    <small>기업맞춤형 국기, 산업구조변화대응 특화, 과정평가형 국가기술자격, 기타 특화사업 심사 및 성과관리</small>
+                                </li>
+                            </ol>
+                        </li>
+                    </ul>
+                </div>
+            </li>
+            <li class="--service-item MT125">
+                <div class="text">
+                    <div class="--item-category flex-box">
+                        <h4 class="--big-title">레벨업 아카데미 <span class="--en-deco">LevelUp Academy</span></h4>
+                        <p class="--list-text">
+                            직업능력개발훈련의 경쟁력 강화를 위해 개별 훈련기관의 특성을 파악하여 훈련기관 역량, <br>
+                            훈련과정 품질, 훈련생 관리 전반에 대한 역량강화 프로그램을 제공하고 교육합니다.
+                        </p>
+                        <button type="button" class="btn-more" data-btn="list-more" data-target=".service-item03">자세히 보기 <span class="material-symbols-outlined">expand_more</span></button>
+                    </div>
+
+                    <ul class="--item-detail-list flex-box MT50 service-item03">
+                        <li class="--item-detail">
+                            <div class="img-box">
+                                <img src="assets/images/service-img07.png" alt="">
+                                <h5 class="--title MB10 text-center">훈련기관 <br>역량제고</h5>
+                            </div>
+                            <ol class="--list">
+                                <li class="--sub-text">직업능력개발훈련 심사평가 A-Z <br>
+                                    <small>직업훈련 제도, 기관설립, 심사평가, 과정승인, 특화훈련 등 직업훈련 이해도 제고</small>
+                                </li>
+                                <li class="--sub-text">훈련기관 조직진단, 매출 분석을 통한 향후 기관운영 방향 설정 및 개선 방안 수립</li>
+                                <li class="--sub-text">교육지원협의회(산업체전문가, 외부전문가, 교육전문가) 구축 및 활용 자문</li>
+                                <li class="--sub-text">교직원 역량 강화 지원을 위한 맞춤형 교육 및 세미나</li>
+                            </ol>
+                        </li>
+                        <li class="--item-detail">
+                            <div class="img-box">
+                                <img src="assets/images/service-img08.png" alt="">
+                                <h5 class="--title MB10 text-center">훈련과정<br>품질제고</h5>
+                            </div>
+                            <ol class="--list">
+                                <li class="--sub-text">디지털 학습 플랫폼, 혼합훈련 등 다양한 훈련방법 적용 및 활용 방안</li>
+                                <li class="--sub-text">훈련성과(취업률, 수요자만족도, 수료율, 교육평가 등) 분석 및 개선 방안 수립</li>
+                                <li class="--sub-text">훈련생 평가도구(평가계획, 평가운영, 플랫폼 구축 등) 개발</li>
+                                <li class="--sub-text">K-디지털 트레이닝 프로젝트 평가 지원</li>
+                            </ol>
+                        </li>
+                        <li class="--item-detail">
+                            <div class="img-box">
+                                <img src="assets/images/service-img09.png" alt="">
+                                <h5 class="--title MB10 text-center">훈련생<br>역량관리</h5>
+                            </div>
+                            <ol class="--list">
+                                <li class="--sub-text">학사관리시스템 구축 및 제공<br>
+                                    <small>교육과정 관리, 훈련생 관리, 교육상담, 정기평가, 취업 및 사후관리, 커뮤니티 등</small>
+                                </li>
+                                <li class="--sub-text">훈련생 성취도 향상<br>
+                                    <small>훈련생 성취도 향상 및 관리를 위한 교수학습 지원 방안 자문</small>
+                                </li>
+                                <li class="--sub-text">훈련생 취업률 향상<br>
+                                    <small>취업컨설팅 업체 제휴, 채용플랫폼 제공, 취업상담 인력 지원, 취업률 관리 등</small>
+                                </li>
+                            </ol>
+                        </li>
+                    </ul>
+                </div>
+            </li>
+            <li class="--service-item MT125">
+                <div class="text">
+                    <div class="--item-category flex-box">
+                        <h4 class="--big-title">커리어 코디네이터 <span class="--en-deco">Career Coordinators</span></h4>
+                        <p class="--list-text">
+                            전문적인 채용 에이전시 업체 제휴 및 인력양성 프로그램을 통해 필요로 하는 인재를 적기에 채용할 수 <br>
+                            있도록 지원하며, 다양한 취업지원 프로그램을 운영하여 훈련기관의 취업률성과를 극대화합니다.  <br>
+                            또한 훈련기관 요구에 따른 맞춤형 종합컨설팅 TF를 지원합니다.
+                        </p>
+                        <button type="button" class="btn-more" data-btn="list-more" data-target=".service-item04">자세히 보기 <span class="material-symbols-outlined">expand_more</span></button>
+                    </div>
+
+                    <ul class="--item-detail-list flex-box MT50 service-item04">
+                        <li class="--item-detail">
+                            <div class="img-box">
+                                <img src="assets/images/service-img10.png" alt="">
+                                <h5 class="--title MB10 text-center">전담인력 <br>채용</h5>
+                            </div>
+                            <ol class="--list">
+                                <li class="--sub-text">전문적인 채용 에이전시와 제휴를 통해 특정 직무에 필요한 전담인력 채용 지원</li>
+                                <li class="--sub-text">분야별 교강사 인력 확보 및 풀 구성을 통해 훈련교강사 부재시 긴급 채용 지원</li>
+                                <li class="--sub-text">강사양성(IT분야) 교육 프로그램 운영을 통한 교육기관 맞춤형 강사 양성</li>
+                            </ol>
+                        </li>
+                        <li class="--item-detail">
+                            <div class="img-box">
+                                <img src="assets/images/service-img11.png" alt="">
+                                <h5 class="--title MB10 text-center">취업지원 <br>컨설팅</h5>
+                            </div>
+                            <ol class="--list">
+                                <li class="--sub-text">
+                                    취업컨설팅 제휴업체 직접 연계 지원<br>
+                                    <small>취업컨설팅, 채용플랫폼 제공, 취업지원 프로그램 운영 등</small>
+                                </li>
+                                <li class="--sub-text">
+                                    교육기관 상주 취업 전담인력 위탁 운영<br>
+                                    <small>취업 전담인력 배정 및 관리, 취업설명회, 취업상담, 취업지원, 취업률 관리 등</small>
+                                </li>
+                                <li class="--sub-text">
+                                    취업률 성과 분석 및 관리<br>
+                                    <small>직종별/분야별 취업률성과표 작성 및 분석자료 제공을 통해 훈련기관의 취업률 향상 제고</small>
+                                </li>
+                            </ol>
+                        </li>
+                        <li class="--item-detail">
+                            <div class="img-box">
+                                <img src="assets/images/service-img12.png" alt="">
+                                <h5 class="--title MB10 text-center">종합컨설팅 <br>TF</h5>
+                            </div>
+                            <ol class="--list">
+                                <li class="--sub-text">신규기관 대상 기본 컨설팅</li>
+                                <li class="--sub-text">기존기관 대상 심화 컨설팅</li>
+                                <li class="--sub-text">미래형 직업훈련 디지털 전환지원 컨설팅(Digital Transformation)</li>
+                            </ol>
+                        </li>
+                    </ul>
+                </div>
+            </li>
+        </ul>
+    </div>
+</section>
+
+<section class="clients-info section">
+    <div class="container">
+        <div class="flex-box">
+            <div class="title-wrap">
+                <span class="--title-deco">Edu Partner</span>
+                <h3 class="--title MB30">에듀웍스와 <br>함께한 고객</h3>
+                <p class="--sub-text">
+                    제휴 파트너의 지속적인 <br class="device-pc">
+                    비지니스 성장을 위해 <br class="device-pc"><br class="device-mobile">
+                    선도적인 역할을 수행할 것입니다!
+                </p>
+            </div>
+            <ul class="contents-wrap clients-list MT20">
+                <li class="flex-box">
+                    <div class="logo-img MB20">
+                        <img src="assets/images/ezen-logo.svg" alt="">
+                    </div>
+                    <h4 class="--title small MB10 PL10">(주)이젠아카데미교육그룹 <br>(26개 지점)</h4>
+                    <ul class="--list PL10">
+                        <li class="--sub-text small">직업능력개발훈련기관 인증평가 지원(18개 지점 5년인증 우수훈련기관 획득)</li>
+                        <li class="--sub-text small">
+                            특화훈련 심사평가 지원 <br>
+                            <small>K-디지털 트레이닝 훈련, 기업맞춤형 국기훈련, 산업구조변화대응 특화훈련, 과정평가형 국가기술자격, 일반고 특화과정 등</small>
+                        </li>
+                        <li class="--sub-text small">
+                            직업훈련 성과평가 지원 <br>
+                            <small>훈련이수자평가, K-디지털 트레이닝(기업맞춤형 국기훈련) 프로젝트 평가, 기관인증 및 훈련과정 심사 성과관리</small>
+                        </li>
+                    </ul>
+                </li>
+                <li class="flex-box">
+                    <div class="logo-img MB20 text-center">
+                        <img src="assets/images/codelab-logo.svg" alt="" style="width:52.8%;">
+                    </div>
+                    <h4 class="--title small MB10 PL10">코드랩아카데미학원</h4>
+                    <ul class="--list PL10">
+                        <li class="--sub-text small">훈련기관 강점에 기반한 훈련기관 차별화 및 특성화 전략 수립</li>
+                        <li class="--sub-text small">기관특성화 전략에 맞춘 주력 훈련분야 타당성 검토 및 선정</li>
+                        <li class="--sub-text small">
+                            직업훈련기관 운영에 필요한 세부계획 수립 <br>
+                            <small>훈련인프라 구축, 투입예산, 매출계획, 교육운영 등</small>
+                        </li>
+                        <li class="--sub-text small">훈련수요 분석을 통한 디지털 신기술(K-디지털 트레이닝) 훈련과정 개발</li>
+                    </ul>
+                </li>
+                <li class="flex-box">
+                    <div class="logo-img MB20 text-center">
+                        <img src="assets/images/ecrew-logo.svg" alt="" style="width:52.6%;">
+                    </div>
+                    <h4 class="--title small MB10 PL10">(주)이크루</h4>
+                    <ul class="--list PL10">
+                        <li class="--sub-text small">교육매칭 큐레이팅 서비스 개발 협업</li>
+                        <li class="--sub-text small">IT개발 온·오프라인 부트캠프 교육 협업</li>
+                        <li class="--sub-text small"> 교육메니지먼트 시스템 플랫폼 개발 협업</li>
+                    </ul>
+                </li>
+                <li class="flex-box">
+                    <div class="logo-img MB20 text-center">
+                        <img src="assets/images/onadn-logo.svg" alt="" style="width:55.5%;">
+                    </div>
+                    <h4 class="--title small MB10 PL10">(주)온애드엔</h4>
+                    <ul class="--list PL10">
+                        <li class="--sub-text small">학원관리시스템 (Education Management System) 개발 협업</li>
+                        <li class="--sub-text small">클라이언트 특성에 맞는 통합 마케팅 솔루션 개발 협업</li>
+                        <li class="--sub-text small">데이터 통합 관리 및 고객 유입 행동 데이터 추적 솔루션 개발 협업</li>
+                    </ul>
+                </li>
+                <li class="flex-box">
+                    <div class="logo-img MB20 text-center">
+                        <img src="assets/images/wheeparam2-logo.svg" alt="" style="width:110%; margin-left:-5%;">
+                    </div>
+                    <h4 class="--title small MB10 PL10">휘파람소프트</h4>
+                    <ul class="--list PL10">
+                        <li class="--sub-text small">스마트 직업훈련(DX) 통합플랫폼 구축 협업</li>
+                        <li class="--sub-text small">RPA 업무자동화 시스템 구축 협업</li>
+                        <li class="--sub-text small">학습자의 니즈에 맞춘 교육콘텐츠 개발 및 디지털화 협업</li>
+                    </ul>
+                </li>
+                <li class="flex-box">
+                    <div class="logo-img MB20 text-center">
+                        <img src="assets/images/kjc-logo.png" alt="" style="width:65.2%">
+                    </div>
+                    <h4 class="--title small MB10 PL10">한국취업센터</h4>
+                    <ul class="--list PL10">
+                        <li class="--sub-text">
+                            전문인재 맞춤형 취업컨설팅 협업 <br>
+                            <small>대한상공회의소, 한국표준협회, 한국소프트웨어저작권협회, 이젠아카데미, 경기도경제과학진흥원, 경남테크노파크 등</small>
+                        </li>
+                        <li class="--sub-text small">전문인재 채용연계 서비스 플랫폼 기획 및 개발 협업</li>
+                        <li class="--sub-text small">기업대상 채용설명회 개최 및 협력사 확보 협업</li>
+                    </ul>
+                </li>
+            </ul>
+        </div>
+    </div>
+</section>
+
+<section class="inquiry-form section" style="background-color:#eff8ff;">
+    <div class="container">
+        <div class="flex-box">
+            <div class="title-box">
+                <div class="title-wrap">
+                    <span class="--title-deco">Counseling</span>
+                    <h3 class="--title MB30">교육서비스 문의</h3>
+                    <p class="--sub-text">몇가지 정보를 입력해 주시면 <br>담당 컨설턴트가 연락을 드리겠습니다</p>
+                </div>
+                <div class="contents-wrap">
+                    <ul class="--list MT50">
+                        <li class="--list-text">
+                            <strong>스타트업 파트너 (Startup Partners)</strong> <br>
+                            브랜딩 기획‧설립‧운영까지 단계별 모든 준비를 도와드립니다.
+                        </li>
+                        <li class="--list-text MT20">
+                            <strong>에듀 엑스퍼트 (Education Experts)</strong> <br>
+                            기관인증 평가, 훈련과정 심사, 특화훈련 심사신청에 필요한 <br>
+                            모든 솔루션을 제공합니다
+                        </li>
+                        <li class="--list-text MT20">
+                            <strong>레벨업 아카데미(LevelUp Academy)</strong> <br>
+                            훈련기관 역량, 훈련과정 품질, 훈련생 관리 전반에 대한 <br>
+                            역량강화 프로그램을 제공하고 교육합니다
+                        </li>
+                        <li class="--list-text MT20">
+                            <strong>커리어 코디네이터(Caree Coordinators)</strong> <br>
+                            전담인력 채용, 취업지원 컨설팅, 종합컨설팅 <br>
+                            TF 프로그램을 제공합니다.
+                        </li>
+                    </ul>
+                </div>
+            </div>
+
+            <div class="form-box MT50">
+                <form name="form" data-form="request-form">
+                    <div class="type__details">
+                        <input type="radio" name="type" value="스타트업 파트너" id="dot-1" checked>
+                        <input type="radio" name="type" value="에듀 엑스퍼트" id="dot-2">
+                        <input type="radio" name="type" value="레벨업 아카데미" id="dot-3">
+                        <input type="radio" name="type" value="커리어 코디네이터" id="dot-4">
+                        <span class="details">상담분야 <span class="required">(필수)</span></span>
+                        <div class="category">
+                            <label for="dot-1">
+                                <span class="dot one"></span>
+                                <span>스타트업 파트너</span>
+                            </label>
+                            <label for="dot-2">
+                                <span class="dot two"></span>
+                                <span>에듀 엑스퍼트</span>
+                            </label>
+                            <label for="dot-3">
+                                <span class="dot three"></span>
+                                <span>레벨업 아카데미</span>
+                            </label>
+                            <label for="dot-4">
+                                <span class="dot four"></span>
+                                <span>커리어 코디네이터</span>
+                            </label>
+                        </div>
+                    </div>
+
+                    <div class="user__details">
+                        <div class="input__box">
+                            <span class="details">기업명</span>
+                            <input type="text">
+                        </div>
+                        <div class="input__box">
+                            <span class="details">담당자명</span>
+                            <input type="text">
+                        </div>
+                        <div class="input__box">
+                            <span class="details">연락처 <span class="required">(필수)</span></span>
+                            <input type="tel" name="phone" data-regex="phone-number" maxlength="13" placeholder="010-1234-5678" required>
+                        </div>
+                        <div class="input__box">
+                            <span class="details">이메일</span>
+                            <input type="email" name="email" data-regex="email-address" placeholder="info@eduworksnet.com">
+                        </div>
+                        <div class="input__box full">
+                            <span class="details">예산범위</span>
+                            <input type="text">
+                        </div>
+                        <div class="input__box full">
+                            <span class="details">문의내용</span>
+                            <textarea rows="3"></textarea>
+                        </div>
+                    </div>
+
+                    <div class="user__details">
+                        <div class="input__box full agree">
+                            <div class="checkbox">
+                                <input type="checkbox" id="agree" />
+                                <label for="agree">개인정보 처리방침 동의</label>
+                            </div>
+                            <a href="#agree-pop" class="link btn-agree-detail">자세히보기</a>
+                        </div>
+                    </div>
+
+                    <div class="button">
+                        <input type="submit" value="문의하기">
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</section>
+<div class="dim-layer" id="agree-pop">
+    <div class="dimBg"></div>
+    <div id="layer2" class="pop-layer">
+        <div class="pop-container">
+            <div class="pop-contents">
+                <h6 class="title MB20">개인정보 취급방침</h6>
+                <p>회사는 상담을 위해 아래와 같은 개인정보를 수집하고 있습니다.</p>
+                <ol class="--list-text MT20">
+                    <li class="MB10">
+                        <span>수집항목 :</span> (필수) 상담분야, 연락처 <br>
+                        (선택) 기업명, 담당자명, 이메일, 예산범위, 문의내용
+                    </li>
+                    <li class="MB10">
+                        <span>수집방법 : </span> 고객 직접 작성
+                    </li>
+                    <li class="MB10">
+                        <span>이용 목적 :</span> 당사의 유선 상담을 희망하는 고객 대상 상담 진행
+                    </li>
+                    <li>
+                        <span>보유 기간 :</span>회사는 이용 목적이 달성된 후 내규에 준하여 보관 및 파기합니다.
+                    </li>
+                </ol>
+                <p class="small MT20">
+                    * 위의 개인정보 수집, 이용에 대한 동의를 거부할 권리가 있습니다. <br>
+                    그러나 동의를 거부하실 경우 본 페이지의 이용에 제한이 있습니다
+                </p>
+
+                <div class="btn-r">
+                    <a href="#" class="btn-layerClose">Close</a>
+                </div>
+                <!--// content-->
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+    $(function () {
+        mobileMenu();
+        scrollAnimateMove();
+
+        var giMenuDuration = 700;
+
+        $('.btn-agree-detail').click(function(){
+            var $href = $(this).attr('href');
+            layer_popup($href);
+        });
+
+        $(".all-menu").click(function () {
+            $(".nav-container").css({ 'display': 'block'});
+            $(".nav-container").css({ 'left': '-100%'});
+            $(".nav-container").animate({ left: '0'}, { duration: giMenuDuration});
+            // $(".nav-container").addClass("toggle")
+        });
+
+        $(".nav-header").click(function () {
+            $(".nav-container").css({ 'left': '-100%'});
+            $(this).parent(".nav-container").animate({ duration: giMenuDuration});
+            // $(".nav-container").css({ 'display': 'none'});
+
+        });
+
+
+        $('[data-btn="list-more"]').on('click', function(){
+            var targetSelector = $(this).data('target');
+            $(this).parent().toggleClass('open');
+            $(targetSelector).toggleClass('open');
+        });
+
+        $(".menu-list").click(function() {
+            var submenu = $(this).find(".list-hide");
+            if($(submenu).is(":visible")){
+                $(submenu).slideUp();
+            }else{
+                $(submenu).slideDown();
+            }
+        });
+
+        $('body').on('keypress', '[data-regex="phone-number"]', function(e){
+            if (e.which != 8 && e.which != 0 &&  e.which != 45 && (e.which < 48 || e.which > 57)) {
+                e.preventDefault();
+            }
+        }).on('blur','[data-regex="phone-number"]', function(e){
+            if($(this).val() == '') return;
+            var transNum = $(this).val().regex('phone');
+            if( transNum === false ) {
+                alert('유효하지 않은 전화번호 입니다.');
+                $(this).val("");
+                $(this).focus();
+                return;
+            }
+        });
+
+        $('body').on('blur', '[data-regex="email-address"]', function(e){
+            if($(this).val() == '') return;
+            var trans_num = $(this).val().regex('email');
+
+            if(! trans_num) {
+                alert('유효하지 않은 이메일주소 입니다.');
+                $(this).val("");
+                $(this).focus();
+            }
+        });
+
+        $('[data-form="request-form"]').on('submit',function(e) {
+            e.preventDefault();
+
+
+            if($('[name="type"]:checked').length === 0) {
+                alert("상담 분야를 선택하세요");
+                return;
+            }
+
+            if($('[name="phone"]').val().length === 0) {
+                alert("연락처를 입력 하세요");
+                $('[name="phone"]').focus();
+                return;
+            }
+
+
+            if(! $('#agree').prop('checked')) {
+                alert("개인정보 처리방침에 동의하세요");
+                $('#agree').focus();
+                return;
+            }
+        })
+    });
+
+
+    function scrollAnimateMove(){
+
+        $('[data-button="btn-animate-move"]').on('click', function(e){
+            e.preventDefault();
+            var target =  $(this).attr("data-target");
+            var position = $(target).offset();
+            var targetOffset = $(this).attr("data-offset");
+
+            console.log(position);
+            console.log(targetOffset);
+
+            if( targetOffset == null ){
+                //console.log(null);
+                $('html,body').animate({ scrollTop : position.top }, 500);
+
+            } else {
+                $('html,body').animate({ scrollTop : position.top - targetOffset  }, 500);
+
+            }
+        });
+
+        return false;
+    }
+
+    function mobileMenu(){
+        var burger =$('#burger'),
+            nav    = $('#main-nav'),
+            body    = $('body'),
+            subMenu = $(".gnb-nav-wrap li a")
+
+        burger.click(function(){
+            $(this).toggleClass("is-open");
+            nav.toggleClass("is-open");
+            body.toggleClass("is-scroll");
+        });
+
+        subMenu.click(function(){
+            burger.removeClass("is-open");
+            nav.removeClass("is-open");
+            body.removeClass("is-scroll");
+        });
+    }
+
+    function layer_popup(el){
+
+        var $el = $(el);		//레이어의 id를 $el 변수에 저장
+        var isDim = $el.prev().hasClass('dimBg');	//dimmed 레이어를 감지하기 위한 boolean 변수
+
+        isDim ? $('.dim-layer').fadeIn() : $el.fadeIn();
+
+        $el.find('a.btn-layerClose').click(function(){
+            isDim ? $('.dim-layer').fadeOut() : $el.fadeOut(); // 닫기 버튼을 클릭하면 레이어가 닫힌다.
+            return false;
+        });
+
+        $('.layer .dimBg').click(function(){
+            $('.dim-layer').fadeOut();
+            return false;
+        });
+
+    }
+
+
+
+
+</script>
+
+
+</div>
 </section>
 <!--E: 컨텐츠 영역-->
 
 <!--S: 푸터 영역-->
+<footer class="footer">
+    <div class="container">
+        <div class="company-info">
+            <div class="full">
+                <dl class="colon">
+                    <dt class="sr-only">회사명</dt>
+                    <dd><strong>에듀웍스컨설팅</strong></dd>
+                </dl>
+                <dl class="colon">
+                    <dt>대표</dt>
+                    <dd>김재정</dd>
+                </dl>
+            </div>
+            <div class="full">
+                <dl class="tel">
+                    <dt class="sr-only">대표번호</dt>
+                    <dd><a href="tel:010-2745-6518">010-2745-6518</a></dd>
+                </dl>
+                <dl class="colon">
+                    <dt>개인정보보호책임자</dt>
+                    <dd>노수연(phoenix00426@nate.com)</dd>
+                </dl>
+                <copyright class="copyright">Copyright by Eduworksnet. All rights reserved.</copyright>
+            </div>
+        </div>
 
+    </div>
+</footer>
 <!--E: 푸터 영역-->
 </body>
 </html>

src/html/include/footer.html

@@ -2,5 +2,32 @@
 <!--E: 컨텐츠 영역-->
 
 <!--S: 푸터 영역-->
+<footer class="footer">
+    <div class="container">
+        <div class="company-info">
+            <div class="full">
+                <dl class="colon">
+                    <dt class="sr-only">회사명</dt>
+                    <dd><strong>에듀웍스컨설팅</strong></dd>
+                </dl>
+                <dl class="colon">
+                    <dt>대표</dt>
+                    <dd>김재정</dd>
+                </dl>
+            </div>
+            <div class="full">
+                <dl class="tel">
+                    <dt class="sr-only">대표번호</dt>
+                    <dd><a href="tel:010-2745-6518">010-2745-6518</a></dd>
+                </dl>
+                <dl class="colon">
+                    <dt>개인정보보호책임자</dt>
+                    <dd>노수연(phoenix00426@nate.com)</dd>
+                </dl>
+                <copyright class="copyright">Copyright by Eduworksnet. All rights reserved.</copyright>
+            </div>
+        </div>
 
+    </div>
+</footer>
 <!--E: 푸터 영역-->

src/html/include/header.html

@@ -6,7 +6,43 @@
 <!--E: 숨김 메뉴-->
 
 <!--S: 헤더 영역-->
+<header class="main-header">
+    <div class="container">
+        <div class="logo" style="">
+            <a href="index.html" class="logo-img">에듀웍스</a>
+        </div>
 
+        <div class="nav-container">
+            <nav class="gnb-nav main-nav" id="main-nav">
+                <div class="nav-header">에듀웍스</div>
+                <ul class="gnb-nav-wrap">
+                    <li>
+                        <a href="javascript:;" data-target=".main-banner" data-button="btn-animate-move" data-offset="100" class="en">홈</a>
+                    </li>
+                    <li>
+                        <a href="javascript:;" data-target=".why-reason" data-button="btn-animate-move" class="en">NOW! 에듀웍스</a>
+                    </li>
+                    <li>
+                        <a href="javascript:;" data-target=".service-info" data-button="btn-animate-move" class="en">에듀스토어</a>
+                    </li>
+
+                    <li>
+                        <a href="javascript:;" data-target=".clients-info" data-button="btn-animate-move" class="en">에듀파트너</a>
+                    </li>
+
+                    <li>
+                        <a href="javascript:;" data-target=".inquiry-form" data-button="btn-animate-move" class="en">상담요청</a>
+                    </li>
+                </ul>
+            </nav>
+        </div>
+
+        <button id="burger" class="open-main-nav">
+            <span class="burger"></span>
+            <span class="burger-text">Menu</span>
+        </button>
+    </div>
+</header>
 <!--E: 헤더 영역-->
 
 <!--S: 컨텐츠 영역-->

src/html/include/meta.html

@@ -4,7 +4,38 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
     <title>@@pageTitle</title>
-    <link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/notosanskr.css">
+    <meta http-equiv="Expires" content="-1">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Cache-Control" content="no-cache">
+    <meta name="description" content="에듀웍스에서는 브랜딩기획, 교육, 평가, 성과까지 교육훈련에 필요한 모든 솔루션을 제공합니다.">
+    <meta name="keywords" content="훈련기관 브랜딩, 훈련기관 설립, 훈련기관 운영, 훈련기관 인증평가, 직업룬련 과정심사, 특화훈련 심사평가, 훈련기관 역량제고, 훈련과정 품질제고, 훈련생 역량관리, 전담인력 채용, 취업지원 컨설팅, 종합컨설팅TF">
+    <meta property="og:type" content="website">
+    <meta property="og:title" content="에듀웍스">
+    <meta property="og:description" content="에듀웍스에서는 브랜딩기획, 교육, 평가, 성과까지 교육훈련에 필요한 모든 솔루션을 제공합니다.">
+    <meta property="og:image" content="http://jjkimhk2.cafe24.com/assets/images/share-img.jpg">
+    <meta property="og:url" content="http://jjkimhk2.cafe24.com">
+    <link rel="canonical" href="http://jjkimhk2.cafe24.com">
+    <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
+    <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
+    <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
+    <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
+    <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
+    <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
+    <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
+    <link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+    <link rel="manifest" href="/manifest.json">
+    <meta name="msapplication-TileColor" content="#ffffff">
+    <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
+    <meta name="theme-color" content="#ffffff">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400;600&display=swap" rel="stylesheet">
+    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
     <link rel="stylesheet" href="@@ROOT/assets/css/style.min.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
     <script src="@@ROOT/assets/js/common.min.js"></script>

src/html/index.html

@@ -1,5 +1,731 @@
-@@include("./include/meta.html", {"pageTitle" : "메인 페이지"})
+@@include("./include/meta.html", {"pageTitle" : "에듀웍스 - 매출을 높이는 전문 교육컨설팅 서비스!"})
 @@include("./include/header.html")
 
+<section class="main-banner">
+    <div id="bg-wrap">
+        <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">
+            <defs>
+                <radialGradient id="Gradient1" cx="50%" cy="50%" fx="0.441602%" fy="50%" r=".5"><animate attributeName="fx" dur="34s" values="0%;3%;0%" repeatCount="indefinite"></animate><stop offset="0%" stop-color="rgba(50, 248, 255, 1)"></stop><stop offset="100%" stop-color="rgba(70, 54, 255, 0)"></stop></radialGradient>
+                <radialGradient id="Gradient2" cx="50%" cy="50%" fx="2.68147%" fy="50%" r=".5"><animate attributeName="fx" dur="23.5s" values="0%;3%;0%" repeatCount="indefinite"></animate><stop offset="0%" stop-color="rgba(70, 54, 255, 1)"></stop><stop offset="100%" stop-color="rgba(255, 255, 0, 0)"></stop></radialGradient>
+                <radialGradient id="Gradient3" cx="50%" cy="50%" fx="0.836536%" fy="50%" r=".5"><animate attributeName="fx" dur="21.5s" values="0%;3%;0%" repeatCount="indefinite"></animate><stop offset="0%" stop-color="rgba(0, 255, 255, 1)"></stop><stop offset="100%" stop-color="rgba(0, 255, 255, 0)"></stop></radialGradient>
+                <radialGradient id="Gradient4" cx="50%" cy="50%" fx="4.56417%" fy="50%" r=".5"><animate attributeName="fx" dur="23s" values="0%;5%;0%" repeatCount="indefinite"></animate><stop offset="0%" stop-color="rgba(0, 255, 0, 1)"></stop><stop offset="100%" stop-color="rgba(50, 248, 255, 0)"></stop></radialGradient>
+                <radialGradient id="Gradient5" cx="50%" cy="50%" fx="2.65405%" fy="50%" r=".5"><animate attributeName="fx" dur="24.5s" values="0%;5%;0%" repeatCount="indefinite"></animate><stop offset="0%" stop-color="rgba(70,54,255, 1)"></stop><stop offset="100%" stop-color="rgba(0,0,255, 0)"></stop></radialGradient>
+                <radialGradient id="Gradient6" cx="50%" cy="50%" fx="0.981338%" fy="50%" r=".5"><animate attributeName="fx" dur="25.5s" values="0%;5%;0%" repeatCount="indefinite"></animate><stop offset="0%" stop-color="rgba(255,0,0, 1)"></stop><stop offset="100%" stop-color="rgba(255,0,0, 0)"></stop></radialGradient>
+            </defs>
+            <rect x="13.744%" y="1.18473%" width="100%" height="100%" fill="url(#Gradient1)" transform="rotate(334.41 50 50)"><animate attributeName="x" dur="12s" values="25%;0%;25%" repeatCount="indefinite"></animate><animate attributeName="y" dur="12s" values="0%;25%;0%" repeatCount="indefinite"></animate><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="7s" repeatCount="indefinite"></animateTransform></rect>
+            <rect x="-2.17916%" y="35.4267%" width="100%" height="100%" fill="url(#Gradient2)" transform="rotate(255.072 50 50)"><animate attributeName="x" dur="24s" values="-25%;0%;-25%" repeatCount="indefinite"></animate><animate attributeName="y" dur="24s" values="0%;50%;0%" repeatCount="indefinite"></animate><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="12s" repeatCount="indefinite"></animateTransform>
+            </rect>
+            <rect x="9.00483%" y="14.5733%" width="100%" height="100%" fill="url(#Gradient3)" transform="rotate(139.903 50 50)"><animate attributeName="x" dur="12s" values="0%;25%;0%" repeatCount="indefinite"></animate><animate attributeName="y" dur="12s" values="0%;25%;0%" repeatCount="indefinite"></animate><animateTransform attributeName="transform" type="rotate" from="360 50 50" to="0 50 50" dur="9s" repeatCount="indefinite"></animateTransform>
+            </rect>
+        </svg>
+    </div>
+    <div class="main-top-text">
+        <h2 class="--title">
+            <small>
+                품격 있는 경호, INTELLIGENCE가 만듭니다.
+            </small>
+            <span class="animation">Professional Protection <br>with Class.</span>
+        </h2>
+        <p class="--sub-text">
+            중요한 순간일수록 더 정교한 보안이 필요합니다. <br>
+            행사, VIP, 기업 맞춤 경호 솔루션을 제공합니다.
+        </p>
+    </div>
+</section>
+
+<section class="why-reason section">
+    <div class="container">
+        <div class="title-wrap">
+            <span class="--title-deco">NOW! Eduworks</span>
+            <h2 class="--title">왜 직업교육 컨설팅은 에듀웍스 일까요?</h2>
+            <p class="--sub-text">직업훈련기관이 미래에 대비하고 최고 수준의 교육을 제공하는 데 도움을 드릴 것입니다!</p>
+        </div>
+        <ul class="contents-wrap reason-list">
+            <li class="reason-box">
+                <h3 class="--title MB10">
+                    <span class="icon material-symbols-outlined">data_table</span>
+                    <span>전문성과 풍부한 경험!</span>
+                </h3>
+                <p class="--sub-text">
+                    저희 업체는 다양한 직업 훈련 및 교육 분야에서 다년간의 경험을 쌓아왔습니다.
+                    우리의 전문가들은 교육 현장에서의 독보적인 전문 지식과 풍부한 경험을 바탕으로
+                    귀하의 기관에 최적화된 솔루션을 제공할 것입니다.
+                </p>
+            </li>
+            <li class="reason-box">
+                <h3 class="--title MB10">
+                    <span class="icon material-symbols-outlined">touch_app</span>
+                    <span>기관 맞춤형 솔루션 제공!</span>
+                </h3>
+                <p class="--sub-text">
+                    직업훈련기관은 고유한 특성과 요구에 맞춰 맞춤형 교육 솔루션을 필요로 합니다.
+                    우리는 귀하의 특별한 요구사항을 고려하여 개별화된 컨설팅을 제공하며,
+                    효과적인 교육 프로그램 구축을 도와드립니다.
+                </p>
+            </li>
+            <li class="reason-box">
+                <h3 class="--title MB10">
+                    <span class="icon material-symbols-outlined">query_stats</span>
+                    <span>효율적 운영과 이윤 극대화!</span>
+                </h3>
+                <p class="--sub-text">
+                    저희가 제공하는 컨설팅은 귀하의 훈련기관이 효율적으로 운영되도록 돕는 동시에 이윤을 창출할 수 있는 방안을
+                    모색 합니다. 이는 기관의 지속 가능성과 경제적 효과를 극대화할 수 있도록 지원합니다.
+                </p>
+            </li>
+            <li class="reason-box">
+                <h3 class="--title">
+                    <span class="icon material-symbols-outlined">work_history</span>
+                    <span>미래형 혁신과 신기술 도입!</span>
+                </h3>
+                <p class="--sub-text">
+                    빠르게 진화하는 교육 환경에서는 혁신과 기술의 도입이 필수입니다.
+                    우리는 귀하의 기관이 최신 교육 기술과 혁신을 효과적으로 적용하고,
+                    학생들에게 미래 지식과 기술을 제공할 수 있도록 돕습니다
+                </p>
+            </li>
+        </ul>
+    </div>
+</section>
+
+<section class="service-info section gray-back">
+    <div class="container">
+        <div class="title-wrap text-center">
+            <span class="--title-deco">Edu Store</span>
+            <h3 class="--title">고객중심 START-to-END 교육서비스</h3>
+            <p class="--sub-text">고객의 요구와 기대에 부합하면서 시작부터 끝까지 효과적이고, <br class="device-mobile">만족스러운 최적화된 교육 서비스를 제공합니다!</p>
+        </div>
+        <ul class="contents-wrap service-list MT125">
+            <li class="--service-item">
+                <div class="text">
+                    <div class="--item-category flex-box">
+                        <h4 class="--big-title">스타트업 파트너 <span class="--en-deco">Startup Partners</span></h4>
+                        <p class="--list-text">
+                            고용노동부로부터 훈련비를 지원받으면서 직업훈련을 운영하고자 계획하고 계신가요? <br>
+                            직업훈련이 처음인 기관을 위한 직업능력개발훈련기관 브랜딩기획‧설립‧운영까지 <br>
+                            단계별 모든 준비를 도와드립니다.
+                        </p>
+                        <button type="button" class="btn-more" data-btn="list-more" data-target=".service-item01">자세히 보기 <span class="material-symbols-outlined">expand_more</span></button>
+                    </div>
+
+                    <ul class="--item-detail-list flex-box MT50 service-item01">
+                        <li class="--item-detail">
+                            <div class="img-box">
+                                <img src="assets/images/service-img01.png" alt="">
+                                <h5 class="--title MB10 text-center">훈련기관 <br>브랜딩</h5>
+                            </div>
+                            <ol class="--list">
+                                <li class="--sub-text">고용노동부 직업훈련 기관 설립을 위한 <br>사업 타당성 검토 및 분석</li>
+                                <li class="--sub-text">산업/지역 단위 훈련수요 분석 및 훈련기관 강점에 <br>기반한 훈련기관 차별화 및 특성화 전략 수립</li>
+                                <li class="--sub-text">직업훈련기관 설립 및 운영에 필요한 세부계획 수립 <br>
+                                    <small> 훈련분야, 훈련인프라, 투입예산, 매출계획 등</small>
+                                </li>
+                            </ol>
+                        </li>
+                        <li class="--item-detail">
+                            <div class="img-box">
+                                <img src="assets/images/service-img02.png" alt="">
+                                <h5 class="--title MB10 text-center">훈련기관 <br>설립</h5>
+                            </div>
+                            <ol class="--list">
+                                <li class="--sub-text">훈련기관(학원, 직업능력개발훈련시설, 평생교육시설 등) 설립유형에 따른 장단점 분석</li>
+                                <li class="--sub-text">훈련기관 유형별 설립 절차 안내 및 고용노동부 인가 <br>
+                                    <small>훈련기관 인증, 실시가능직종, NCS 확인강사 등</small>
+                                </li>
+                                <li class="--sub-text">설립자 및 운영 직원에 대한 교육 및 훈련 프로그램 제공</li>
+                            </ol>
+                        </li>
+                        <li class="--item-detail">
+                            <div class="img-box">
+                                <img src="assets/images/service-img03.png" alt="">
+                                <h5 class="--title MB10 text-center">훈련기관 <br>운영</h5>
+                            </div>
+                            <ol class="--list">
+                                <li class="--sub-text">훈련수요자 요구기반 훈련과정 개발 및 운영 계획 수립</li>
+                                <li class="--sub-text">훈련과정 인정부터 운영 및 결과보고까지 <br>교육훈련 운영 실무 지원</li>
+                                <li class="--sub-text">교육훈련 운영 가이드 및 각종 매뉴얼(서식/자료) 제공</li>
+                                <li class="--sub-text">직업훈련 정책, 제도, 규정, 지침 등에 대한 지속적인 정보제공 및 교육</li>
+                            </ol>
+                        </li>
+                    </ul>
+                </div>
+            </li>
+            <li class="--service-item MT125">
+                <div class="text">
+                    <div class="--item-category flex-box">
+                        <h4 class="--big-title">에듀 엑스퍼트 <span class="--en-deco">Education Experts</span></h4>
+                        <p class="--list-text">
+                            직업능력개발훈련을 운영하는 훈련기관을 대상으로 맞춤형 컨설팅을 실시하여 훈련기관 인증평가와 <br>
+                            훈련과정 심사에 대한 부담을 해소하고 훈련기관의 실질적인 역량강화와 양질의  <br>
+                            직업훈련과정 개발을 지원합니다.
+                        </p>
+                        <button type="button" class="btn-more" data-btn="list-more" data-target=".service-item02">자세히 보기 <span class="material-symbols-outlined">expand_more</span></button>
+                    </div>
+
+                    <ul class="--item-detail-list flex-box MT50 service-item02">
+                        <li class="--item-detail">
+                            <div class="img-box">
+                                <img src="assets/images/service-img04.png" alt="">
+                                <h5 class="--title MB10 text-center">훈련기관 <br>인증평가</h5>
+                            </div>
+                            <ol class="--list">
+                                <li class="--sub-text">기관평가 개요, 심사절차, 평가지표, 운영체계, 훈련기관 준비사항</li>
+                                <li class="--sub-text">평가참여신청서 및 자체평가보고서 작성</li>
+                                <li class="--sub-text">훈련성과평가 및 현장평가 매뉴얼(서식) 제공 및 준비</li>
+                                <li class="--sub-text">베스트직업훈련기관(BHA) 공모 심사 특화사업 컨셉 설정</li>
+                                <li class="--sub-text">베스트직업훈련기관(BHA) 계획 및 우수 실적 보고서 작성(서면평가/발표평가)</li>
+                            </ol>
+                        </li>
+                        <li class="--item-detail">
+                            <div class="img-box">
+                                <img src="assets/images/service-img05.png" alt="">
+                                <h5 class="--title MB10 text-center">직업훈련 <br>과정심사</h5>
+                            </div>
+                            <ol class="--list">
+                                <li class="--sub-text">과정심사 개요, 심사절차, 평가지표, 운영체계, 훈련기관 준비사항</li>
+                                <li class="--sub-text">기관특성화 전략에 맞춘 주력 훈련분야 타당성 검토 및 선정</li>
+                                <li class="--sub-text">훈련수요 및 훈련성과 분석을 통한 훈련과정 개발</li>
+                                <li class="--sub-text">훈련과정(국가기간전략산업직종, 계좌제훈련, 사업주훈련) 심사 신청</li>
+                            </ol>
+                        </li>
+                        <li class="--item-detail">
+                            <div class="img-box">
+                                <img src="assets/images/service-img06.png" alt="">
+                                <h5 class="--title MB10 text-center">특화훈련 <br>심사평가</h5>
+                            </div>
+                            <ol class="--list">
+                                <li class="--sub-text">K-디지털 트레이닝 <br>
+                                    <small>K-디지털 트레이닝 훈련과정 심사 및 성과관리</small>
+                                </li>
+                                <li class="--sub-text">특화심사<br>
+                                    <small>기업맞춤형 국기, 산업구조변화대응 특화, 과정평가형 국가기술자격, 기타 특화사업 심사 및 성과관리</small>
+                                </li>
+                            </ol>
+                        </li>
+                    </ul>
+                </div>
+            </li>
+            <li class="--service-item MT125">
+                <div class="text">
+                    <div class="--item-category flex-box">
+                        <h4 class="--big-title">레벨업 아카데미 <span class="--en-deco">LevelUp Academy</span></h4>
+                        <p class="--list-text">
+                            직업능력개발훈련의 경쟁력 강화를 위해 개별 훈련기관의 특성을 파악하여 훈련기관 역량, <br>
+                            훈련과정 품질, 훈련생 관리 전반에 대한 역량강화 프로그램을 제공하고 교육합니다.
+                        </p>
+                        <button type="button" class="btn-more" data-btn="list-more" data-target=".service-item03">자세히 보기 <span class="material-symbols-outlined">expand_more</span></button>
+                    </div>
+
+                    <ul class="--item-detail-list flex-box MT50 service-item03">
+                        <li class="--item-detail">
+                            <div class="img-box">
+                                <img src="assets/images/service-img07.png" alt="">
+                                <h5 class="--title MB10 text-center">훈련기관 <br>역량제고</h5>
+                            </div>
+                            <ol class="--list">
+                                <li class="--sub-text">직업능력개발훈련 심사평가 A-Z <br>
+                                    <small>직업훈련 제도, 기관설립, 심사평가, 과정승인, 특화훈련 등 직업훈련 이해도 제고</small>
+                                </li>
+                                <li class="--sub-text">훈련기관 조직진단, 매출 분석을 통한 향후 기관운영 방향 설정 및 개선 방안 수립</li>
+                                <li class="--sub-text">교육지원협의회(산업체전문가, 외부전문가, 교육전문가) 구축 및 활용 자문</li>
+                                <li class="--sub-text">교직원 역량 강화 지원을 위한 맞춤형 교육 및 세미나</li>
+                            </ol>
+                        </li>
+                        <li class="--item-detail">
+                            <div class="img-box">
+                                <img src="assets/images/service-img08.png" alt="">
+                                <h5 class="--title MB10 text-center">훈련과정<br>품질제고</h5>
+                            </div>
+                            <ol class="--list">
+                                <li class="--sub-text">디지털 학습 플랫폼, 혼합훈련 등 다양한 훈련방법 적용 및 활용 방안</li>
+                                <li class="--sub-text">훈련성과(취업률, 수요자만족도, 수료율, 교육평가 등) 분석 및 개선 방안 수립</li>
+                                <li class="--sub-text">훈련생 평가도구(평가계획, 평가운영, 플랫폼 구축 등) 개발</li>
+                                <li class="--sub-text">K-디지털 트레이닝 프로젝트 평가 지원</li>
+                            </ol>
+                        </li>
+                        <li class="--item-detail">
+                            <div class="img-box">
+                                <img src="assets/images/service-img09.png" alt="">
+                                <h5 class="--title MB10 text-center">훈련생<br>역량관리</h5>
+                            </div>
+                            <ol class="--list">
+                                <li class="--sub-text">학사관리시스템 구축 및 제공<br>
+                                    <small>교육과정 관리, 훈련생 관리, 교육상담, 정기평가, 취업 및 사후관리, 커뮤니티 등</small>
+                                </li>
+                                <li class="--sub-text">훈련생 성취도 향상<br>
+                                    <small>훈련생 성취도 향상 및 관리를 위한 교수학습 지원 방안 자문</small>
+                                </li>
+                                <li class="--sub-text">훈련생 취업률 향상<br>
+                                    <small>취업컨설팅 업체 제휴, 채용플랫폼 제공, 취업상담 인력 지원, 취업률 관리 등</small>
+                                </li>
+                            </ol>
+                        </li>
+                    </ul>
+                </div>
+            </li>
+            <li class="--service-item MT125">
+                <div class="text">
+                    <div class="--item-category flex-box">
+                        <h4 class="--big-title">커리어 코디네이터 <span class="--en-deco">Career Coordinators</span></h4>
+                        <p class="--list-text">
+                            전문적인 채용 에이전시 업체 제휴 및 인력양성 프로그램을 통해 필요로 하는 인재를 적기에 채용할 수 <br>
+                            있도록 지원하며, 다양한 취업지원 프로그램을 운영하여 훈련기관의 취업률성과를 극대화합니다.  <br>
+                            또한 훈련기관 요구에 따른 맞춤형 종합컨설팅 TF를 지원합니다.
+                        </p>
+                        <button type="button" class="btn-more" data-btn="list-more" data-target=".service-item04">자세히 보기 <span class="material-symbols-outlined">expand_more</span></button>
+                    </div>
+
+                    <ul class="--item-detail-list flex-box MT50 service-item04">
+                        <li class="--item-detail">
+                            <div class="img-box">
+                                <img src="assets/images/service-img10.png" alt="">
+                                <h5 class="--title MB10 text-center">전담인력 <br>채용</h5>
+                            </div>
+                            <ol class="--list">
+                                <li class="--sub-text">전문적인 채용 에이전시와 제휴를 통해 특정 직무에 필요한 전담인력 채용 지원</li>
+                                <li class="--sub-text">분야별 교강사 인력 확보 및 풀 구성을 통해 훈련교강사 부재시 긴급 채용 지원</li>
+                                <li class="--sub-text">강사양성(IT분야) 교육 프로그램 운영을 통한 교육기관 맞춤형 강사 양성</li>
+                            </ol>
+                        </li>
+                        <li class="--item-detail">
+                            <div class="img-box">
+                                <img src="assets/images/service-img11.png" alt="">
+                                <h5 class="--title MB10 text-center">취업지원 <br>컨설팅</h5>
+                            </div>
+                            <ol class="--list">
+                                <li class="--sub-text">
+                                    취업컨설팅 제휴업체 직접 연계 지원<br>
+                                    <small>취업컨설팅, 채용플랫폼 제공, 취업지원 프로그램 운영 등</small>
+                                </li>
+                                <li class="--sub-text">
+                                    교육기관 상주 취업 전담인력 위탁 운영<br>
+                                    <small>취업 전담인력 배정 및 관리, 취업설명회, 취업상담, 취업지원, 취업률 관리 등</small>
+                                </li>
+                                <li class="--sub-text">
+                                    취업률 성과 분석 및 관리<br>
+                                    <small>직종별/분야별 취업률성과표 작성 및 분석자료 제공을 통해 훈련기관의 취업률 향상 제고</small>
+                                </li>
+                            </ol>
+                        </li>
+                        <li class="--item-detail">
+                            <div class="img-box">
+                                <img src="assets/images/service-img12.png" alt="">
+                                <h5 class="--title MB10 text-center">종합컨설팅 <br>TF</h5>
+                            </div>
+                            <ol class="--list">
+                                <li class="--sub-text">신규기관 대상 기본 컨설팅</li>
+                                <li class="--sub-text">기존기관 대상 심화 컨설팅</li>
+                                <li class="--sub-text">미래형 직업훈련 디지털 전환지원 컨설팅(Digital Transformation)</li>
+                            </ol>
+                        </li>
+                    </ul>
+                </div>
+            </li>
+        </ul>
+    </div>
+</section>
+
+<section class="clients-info section">
+    <div class="container">
+        <div class="flex-box">
+            <div class="title-wrap">
+                <span class="--title-deco">Edu Partner</span>
+                <h3 class="--title MB30">에듀웍스와 <br>함께한 고객</h3>
+                <p class="--sub-text">
+                    제휴 파트너의 지속적인 <br class="device-pc">
+                    비지니스 성장을 위해 <br class="device-pc"><br class="device-mobile">
+                    선도적인 역할을 수행할 것입니다!
+                </p>
+            </div>
+            <ul class="contents-wrap clients-list MT20">
+                <li class="flex-box">
+                    <div class="logo-img MB20">
+                        <img src="assets/images/ezen-logo.svg" alt="">
+                    </div>
+                    <h4 class="--title small MB10 PL10">(주)이젠아카데미교육그룹 <br>(26개 지점)</h4>
+                    <ul class="--list PL10">
+                        <li class="--sub-text small">직업능력개발훈련기관 인증평가 지원(18개 지점 5년인증 우수훈련기관 획득)</li>
+                        <li class="--sub-text small">
+                            특화훈련 심사평가 지원 <br>
+                            <small>K-디지털 트레이닝 훈련, 기업맞춤형 국기훈련, 산업구조변화대응 특화훈련, 과정평가형 국가기술자격, 일반고 특화과정 등</small>
+                        </li>
+                        <li class="--sub-text small">
+                            직업훈련 성과평가 지원 <br>
+                            <small>훈련이수자평가, K-디지털 트레이닝(기업맞춤형 국기훈련) 프로젝트 평가, 기관인증 및 훈련과정 심사 성과관리</small>
+                        </li>
+                    </ul>
+                </li>
+                <li class="flex-box">
+                    <div class="logo-img MB20 text-center">
+                        <img src="assets/images/codelab-logo.svg" alt="" style="width:52.8%;">
+                    </div>
+                    <h4 class="--title small MB10 PL10">코드랩아카데미학원</h4>
+                    <ul class="--list PL10">
+                        <li class="--sub-text small">훈련기관 강점에 기반한 훈련기관 차별화 및 특성화 전략 수립</li>
+                        <li class="--sub-text small">기관특성화 전략에 맞춘 주력 훈련분야 타당성 검토 및 선정</li>
+                        <li class="--sub-text small">
+                            직업훈련기관 운영에 필요한 세부계획 수립 <br>
+                            <small>훈련인프라 구축, 투입예산, 매출계획, 교육운영 등</small>
+                        </li>
+                        <li class="--sub-text small">훈련수요 분석을 통한 디지털 신기술(K-디지털 트레이닝) 훈련과정 개발</li>
+                    </ul>
+                </li>
+                <li class="flex-box">
+                    <div class="logo-img MB20 text-center">
+                        <img src="assets/images/ecrew-logo.svg" alt="" style="width:52.6%;">
+                    </div>
+                    <h4 class="--title small MB10 PL10">(주)이크루</h4>
+                    <ul class="--list PL10">
+                        <li class="--sub-text small">교육매칭 큐레이팅 서비스 개발 협업</li>
+                        <li class="--sub-text small">IT개발 온·오프라인 부트캠프 교육 협업</li>
+                        <li class="--sub-text small"> 교육메니지먼트 시스템 플랫폼 개발 협업</li>
+                    </ul>
+                </li>
+                <li class="flex-box">
+                    <div class="logo-img MB20 text-center">
+                        <img src="assets/images/onadn-logo.svg" alt="" style="width:55.5%;">
+                    </div>
+                    <h4 class="--title small MB10 PL10">(주)온애드엔</h4>
+                    <ul class="--list PL10">
+                        <li class="--sub-text small">학원관리시스템 (Education Management System) 개발 협업</li>
+                        <li class="--sub-text small">클라이언트 특성에 맞는 통합 마케팅 솔루션 개발 협업</li>
+                        <li class="--sub-text small">데이터 통합 관리 및 고객 유입 행동 데이터 추적 솔루션 개발 협업</li>
+                    </ul>
+                </li>
+                <li class="flex-box">
+                    <div class="logo-img MB20 text-center">
+                        <img src="assets/images/wheeparam2-logo.svg" alt="" style="width:110%; margin-left:-5%;">
+                    </div>
+                    <h4 class="--title small MB10 PL10">휘파람소프트</h4>
+                    <ul class="--list PL10">
+                        <li class="--sub-text small">스마트 직업훈련(DX) 통합플랫폼 구축 협업</li>
+                        <li class="--sub-text small">RPA 업무자동화 시스템 구축 협업</li>
+                        <li class="--sub-text small">학습자의 니즈에 맞춘 교육콘텐츠 개발 및 디지털화 협업</li>
+                    </ul>
+                </li>
+                <li class="flex-box">
+                    <div class="logo-img MB20 text-center">
+                        <img src="assets/images/kjc-logo.png" alt="" style="width:65.2%">
+                    </div>
+                    <h4 class="--title small MB10 PL10">한국취업센터</h4>
+                    <ul class="--list PL10">
+                        <li class="--sub-text">
+                            전문인재 맞춤형 취업컨설팅 협업 <br>
+                            <small>대한상공회의소, 한국표준협회, 한국소프트웨어저작권협회, 이젠아카데미, 경기도경제과학진흥원, 경남테크노파크 등</small>
+                        </li>
+                        <li class="--sub-text small">전문인재 채용연계 서비스 플랫폼 기획 및 개발 협업</li>
+                        <li class="--sub-text small">기업대상 채용설명회 개최 및 협력사 확보 협업</li>
+                    </ul>
+                </li>
+            </ul>
+        </div>
+    </div>
+</section>
+
+<section class="inquiry-form section" style="background-color:#eff8ff;">
+    <div class="container">
+        <div class="flex-box">
+            <div class="title-box">
+                <div class="title-wrap">
+                    <span class="--title-deco">Counseling</span>
+                    <h3 class="--title MB30">교육서비스 문의</h3>
+                    <p class="--sub-text">몇가지 정보를 입력해 주시면 <br>담당 컨설턴트가 연락을 드리겠습니다</p>
+                </div>
+                <div class="contents-wrap">
+                    <ul class="--list MT50">
+                        <li class="--list-text">
+                            <strong>스타트업 파트너 (Startup Partners)</strong> <br>
+                            브랜딩 기획‧설립‧운영까지 단계별 모든 준비를 도와드립니다.
+                        </li>
+                        <li class="--list-text MT20">
+                            <strong>에듀 엑스퍼트 (Education Experts)</strong> <br>
+                            기관인증 평가, 훈련과정 심사, 특화훈련 심사신청에 필요한 <br>
+                            모든 솔루션을 제공합니다
+                        </li>
+                        <li class="--list-text MT20">
+                            <strong>레벨업 아카데미(LevelUp Academy)</strong> <br>
+                            훈련기관 역량, 훈련과정 품질, 훈련생 관리 전반에 대한 <br>
+                            역량강화 프로그램을 제공하고 교육합니다
+                        </li>
+                        <li class="--list-text MT20">
+                            <strong>커리어 코디네이터(Caree Coordinators)</strong> <br>
+                            전담인력 채용, 취업지원 컨설팅, 종합컨설팅 <br>
+                            TF 프로그램을 제공합니다.
+                        </li>
+                    </ul>
+                </div>
+            </div>
+
+            <div class="form-box MT50">
+                <form name="form" data-form="request-form">
+                    <div class="type__details">
+                        <input type="radio" name="type" value="스타트업 파트너" id="dot-1" checked>
+                        <input type="radio" name="type" value="에듀 엑스퍼트" id="dot-2">
+                        <input type="radio" name="type" value="레벨업 아카데미" id="dot-3">
+                        <input type="radio" name="type" value="커리어 코디네이터" id="dot-4">
+                        <span class="details">상담분야 <span class="required">(필수)</span></span>
+                        <div class="category">
+                            <label for="dot-1">
+                                <span class="dot one"></span>
+                                <span>스타트업 파트너</span>
+                            </label>
+                            <label for="dot-2">
+                                <span class="dot two"></span>
+                                <span>에듀 엑스퍼트</span>
+                            </label>
+                            <label for="dot-3">
+                                <span class="dot three"></span>
+                                <span>레벨업 아카데미</span>
+                            </label>
+                            <label for="dot-4">
+                                <span class="dot four"></span>
+                                <span>커리어 코디네이터</span>
+                            </label>
+                        </div>
+                    </div>
+
+                    <div class="user__details">
+                        <div class="input__box">
+                            <span class="details">기업명</span>
+                            <input type="text">
+                        </div>
+                        <div class="input__box">
+                            <span class="details">담당자명</span>
+                            <input type="text">
+                        </div>
+                        <div class="input__box">
+                            <span class="details">연락처 <span class="required">(필수)</span></span>
+                            <input type="tel" name="phone" data-regex="phone-number" maxlength="13" placeholder="010-1234-5678" required>
+                        </div>
+                        <div class="input__box">
+                            <span class="details">이메일</span>
+                            <input type="email" name="email" data-regex="email-address" placeholder="info@eduworksnet.com">
+                        </div>
+                        <div class="input__box full">
+                            <span class="details">예산범위</span>
+                            <input type="text">
+                        </div>
+                        <div class="input__box full">
+                            <span class="details">문의내용</span>
+                            <textarea rows="3"></textarea>
+                        </div>
+                    </div>
+
+                    <div class="user__details">
+                        <div class="input__box full agree">
+                            <div class="checkbox">
+                                <input type="checkbox" id="agree" />
+                                <label for="agree">개인정보 처리방침 동의</label>
+                            </div>
+                            <a href="#agree-pop" class="link btn-agree-detail">자세히보기</a>
+                        </div>
+                    </div>
+
+                    <div class="button">
+                        <input type="submit" value="문의하기">
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</section>
+<div class="dim-layer" id="agree-pop">
+    <div class="dimBg"></div>
+    <div id="layer2" class="pop-layer">
+        <div class="pop-container">
+            <div class="pop-contents">
+                <h6 class="title MB20">개인정보 취급방침</h6>
+                <p>회사는 상담을 위해 아래와 같은 개인정보를 수집하고 있습니다.</p>
+                <ol class="--list-text MT20">
+                    <li class="MB10">
+                        <span>수집항목 :</span> (필수) 상담분야, 연락처 <br>
+                        (선택) 기업명, 담당자명, 이메일, 예산범위, 문의내용
+                    </li>
+                    <li class="MB10">
+                        <span>수집방법 : </span> 고객 직접 작성
+                    </li>
+                    <li class="MB10">
+                        <span>이용 목적 :</span> 당사의 유선 상담을 희망하는 고객 대상 상담 진행
+                    </li>
+                    <li>
+                        <span>보유 기간 :</span>회사는 이용 목적이 달성된 후 내규에 준하여 보관 및 파기합니다.
+                    </li>
+                </ol>
+                <p class="small MT20">
+                    * 위의 개인정보 수집, 이용에 대한 동의를 거부할 권리가 있습니다. <br>
+                    그러나 동의를 거부하실 경우 본 페이지의 이용에 제한이 있습니다
+                </p>
+
+                <div class="btn-r">
+                    <a href="#" class="btn-layerClose">Close</a>
+                </div>
+                <!--// content-->
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+    $(function () {
+        mobileMenu();
+        scrollAnimateMove();
+
+        var giMenuDuration = 700;
+
+        $('.btn-agree-detail').click(function(){
+            var $href = $(this).attr('href');
+            layer_popup($href);
+        });
+
+        $(".all-menu").click(function () {
+            $(".nav-container").css({ 'display': 'block'});
+            $(".nav-container").css({ 'left': '-100%'});
+            $(".nav-container").animate({ left: '0'}, { duration: giMenuDuration});
+            // $(".nav-container").addClass("toggle")
+        });
+
+        $(".nav-header").click(function () {
+            $(".nav-container").css({ 'left': '-100%'});
+            $(this).parent(".nav-container").animate({ duration: giMenuDuration});
+            // $(".nav-container").css({ 'display': 'none'});
+
+        });
+
+
+        $('[data-btn="list-more"]').on('click', function(){
+            var targetSelector = $(this).data('target');
+            $(this).parent().toggleClass('open');
+            $(targetSelector).toggleClass('open');
+        });
+
+        $(".menu-list").click(function() {
+            var submenu = $(this).find(".list-hide");
+            if($(submenu).is(":visible")){
+                $(submenu).slideUp();
+            }else{
+                $(submenu).slideDown();
+            }
+        });
+
+        $('body').on('keypress', '[data-regex="phone-number"]', function(e){
+            if (e.which != 8 && e.which != 0 &&  e.which != 45 && (e.which < 48 || e.which > 57)) {
+                e.preventDefault();
+            }
+        }).on('blur','[data-regex="phone-number"]', function(e){
+            if($(this).val() == '') return;
+            var transNum = $(this).val().regex('phone');
+            if( transNum === false ) {
+                alert('유효하지 않은 전화번호 입니다.');
+                $(this).val("");
+                $(this).focus();
+                return;
+            }
+        });
+
+        $('body').on('blur', '[data-regex="email-address"]', function(e){
+            if($(this).val() == '') return;
+            var trans_num = $(this).val().regex('email');
+
+            if(! trans_num) {
+                alert('유효하지 않은 이메일주소 입니다.');
+                $(this).val("");
+                $(this).focus();
+            }
+        });
+
+        $('[data-form="request-form"]').on('submit',function(e) {
+            e.preventDefault();
+
+
+            if($('[name="type"]:checked').length === 0) {
+                alert("상담 분야를 선택하세요");
+                return;
+            }
+
+            if($('[name="phone"]').val().length === 0) {
+                alert("연락처를 입력 하세요");
+                $('[name="phone"]').focus();
+                return;
+            }
+
+
+            if(! $('#agree').prop('checked')) {
+                alert("개인정보 처리방침에 동의하세요");
+                $('#agree').focus();
+                return;
+            }
+        })
+    });
+
+
+    function scrollAnimateMove(){
+
+        $('[data-button="btn-animate-move"]').on('click', function(e){
+            e.preventDefault();
+            var target =  $(this).attr("data-target");
+            var position = $(target).offset();
+            var targetOffset = $(this).attr("data-offset");
+
+            console.log(position);
+            console.log(targetOffset);
+
+            if( targetOffset == null ){
+                //console.log(null);
+                $('html,body').animate({ scrollTop : position.top }, 500);
+
+            } else {
+                $('html,body').animate({ scrollTop : position.top - targetOffset  }, 500);
+
+            }
+        });
+
+        return false;
+    }
+
+    function mobileMenu(){
+        var burger =$('#burger'),
+            nav    = $('#main-nav'),
+            body    = $('body'),
+            subMenu = $(".gnb-nav-wrap li a")
+
+        burger.click(function(){
+            $(this).toggleClass("is-open");
+            nav.toggleClass("is-open");
+            body.toggleClass("is-scroll");
+        });
+
+        subMenu.click(function(){
+            burger.removeClass("is-open");
+            nav.removeClass("is-open");
+            body.removeClass("is-scroll");
+        });
+    }
+
+    function layer_popup(el){
+
+        var $el = $(el);		//레이어의 id를 $el 변수에 저장
+        var isDim = $el.prev().hasClass('dimBg');	//dimmed 레이어를 감지하기 위한 boolean 변수
+
+        isDim ? $('.dim-layer').fadeIn() : $el.fadeIn();
+
+        $el.find('a.btn-layerClose').click(function(){
+            isDim ? $('.dim-layer').fadeOut() : $el.fadeOut(); // 닫기 버튼을 클릭하면 레이어가 닫힌다.
+            return false;
+        });
+
+        $('.layer .dimBg').click(function(){
+            $('.dim-layer').fadeOut();
+            return false;
+        });
+
+    }
+
+
+
+
+</script>
+
+
+</div>
 @@include("./include/footer.html")
 @@include("./include/tail.html")

src/icons/iconsTemplates.scss.handlebars

@@ -1,25 +0,0 @@
-[class^={{packageName}}-] {
-    display:inline-block;
-    vertical-align:middle;
-    position: relative;
-    text-indent: -99999px;
-    overflow: hidden;
-    background-repeat: no-repeat;
-    background-image: url('{{{spritesheet.escaped_image}}}');
-
-    {{#spritesheet}}
-    $total_width: {{width}};
-    $total_height: {{height}};
-    {{/spritesheet}}
-
-    {{#block "sprites"}}
-        {{#each sprites}}
-    &.{{packageName}}-{{name}} {
-        background-size: (($total_width / {{width}}) * 100%) (($total_height / {{height}}) * 100%);
-        background-position: (({{offset_x}} / ($total_width - {{width}})) * -100%) (({{offset_y}} / ($total_height - {{height}})) * -100%);
-        width: {{px.width}};
-        height: {{px.height}};
-    }
-        {{/each}}
-    {{/block}}
-}

src/scss/_variables.scss

@@ -1,19 +1,20 @@
 // 색상 변수
-$color-primary : #282828;   // 메인 컬러
+$color-primary : #4636ff;   // 메인 컬러
 $color-secondary : #282828; // 서브 컬러
 
 $body-color : #212529;      // 기본 텍스트 색상
 $body-bg-color : #FFFFFF;   // 기본 배경 색상
 
-$link-color : $body-color;          // 링크 텍스트 색상
+$link-color : inherit;          // 링크 텍스트 색상
 $link-hover-color : $color-primary; // 링크 오버시 텍스트 색상
 
 // 폰트 관련
-$font-family-base : 'Noto Sans KR',sans-serif;     // 기본글자에 사용 되는 폰트
+$font-family-base : 'Pretendard',sans-serif;     // 기본글자에 사용 되는 폰트
+$font-en-family-base: 'Montserrat', sans-serif;
 $font-family-heading : $font-family-base;          // 헤딩태그에 사용 되는 폰트
 $font-size-base   : 16px;
-$font-weight-base : 400;
-$font-weight-bold : 700;
+$font-weight-base : 500;
+$font-weight-bold : 800;
 $line-height-base : 1.5em;
 
 // 애니메이션
@@ -21,9 +22,13 @@ $default-animation : ease;
 
 // 반응형 포인트
 $break-lg : 1200px;
-$break-md : 992px;
-$break-sm : 768px;
+$break-md : 768px;
+$break-sm : 520px;
 
 // 테이블 관련
 $table-cell-padding:          .75rem !default;
-$table-cell-padding-sm:       .3rem !default;
+$table-cell-padding-sm:       .3rem !default;
+
+$color-dark :  #1f1841;
+$color-light : #88888a;
+$color-deep : #747474;

src/scss/boot/_fonts.scss

@@ -1,3 +1,66 @@
 /***************************************************************************************
  * 폰트
- ****************************************************************************************/
+ ****************************************************************************************/
+
+@font-face {
+  font-family: 'Pretendard';
+  font-weight: 900;
+  font-display: swap;
+  src: local('Pretendard Black'), url(../fonts/woff2/Pretendard-Black.woff2) format('woff2'), url(../fonts/woff/Pretendard-Black.woff) format('woff');
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  font-weight: 800;
+  font-display: swap;
+  src: local('Pretendard ExtraBold'), url(../fonts/woff2/Pretendard-ExtraBold.woff2) format('woff2'), url(../fonts/woff/Pretendard-ExtraBold.woff) format('woff');
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  font-weight: 700;
+  font-display: swap;
+  src: local('Pretendard Bold'), url(../fonts/woff2/Pretendard-Bold.woff2) format('woff2'), url(../fonts/woff/Pretendard-Bold.woff) format('woff');
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  font-weight: 600;
+  font-display: swap;
+  src: local('Pretendard SemiBold'), url(../fonts/woff2/Pretendard-SemiBold.woff2) format('woff2'), url(../fonts/woff/Pretendard-SemiBold.woff) format('woff');
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  font-weight: 500;
+  font-display: swap;
+  src: local('Pretendard Medium'), url(../fonts/woff2/Pretendard-Medium.woff2) format('woff2'), url(../fonts/woff/Pretendard-Medium.woff) format('woff');
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  font-weight: 400;
+  font-display: swap;
+  src: local('Pretendard Regular'), url(../fonts/woff2/Pretendard-Regular.woff2) format('woff2'), url(../fonts/woff/Pretendard-Regular.woff) format('woff');
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  font-weight: 300;
+  font-display: swap;
+  src: local('Pretendard Light'), url(../fonts/woff2/Pretendard-Light.woff2) format('woff2'), url(../fonts/woff/Pretendard-Light.woff) format('woff');
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  font-weight: 200;
+  font-display: swap;
+  src: local('Pretendard ExtraLight'), url(../fonts/woff2/Pretendard-ExtraLight.woff2) format('woff2'), url(../fonts/woff/Pretendard-ExtraLight.woff) format('woff');
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  font-weight: 100;
+  font-display: swap;
+  src: local('Pretendard Thin'), url(../fonts/woff2/Pretendard-Thin.woff2) format('woff2'), url(../fonts/woff/Pretendard-Thin.woff) format('woff');
+}

src/scss/common/_footer.scss

@@ -0,0 +1,106 @@
+
+.footer {
+  padding: 40px 0;
+  font-weight: 300;
+  color: #fff;
+  background: #000;
+  text-align: center;
+  @include display-md(){
+    padding: REM(60px / 3) 0;
+  }
+
+  .company-info {
+    @include display-flex();
+    flex-direction: column;
+    .sr-only{display: none;}
+    .colon {
+      > dt {
+        position:relative;
+        padding-right:10px;
+        &:after {
+          content: ":";
+          position: absolute;
+          right: 5px;
+          top: 0;
+        }
+      }
+    }
+    dl {
+      @include display-flex();
+      color:#646577;
+      font-size:16px;
+      padding-top:10px;
+      @include display-md(){
+        font-size:REM(30px / 3);
+      }
+      dt {
+        line-height:1;
+      }
+      dd {
+        line-height: 1;
+        margin:0;
+        address {
+          font-style:normal;
+        }
+        @include display-md(){
+          > strong{
+            font-size:REM(36px / 3);
+          }
+        }
+      }
+    }
+    .full {
+      width:100%;
+      @include display-flex();
+      dl {
+        & + dl {
+          margin-left:20px;
+        }
+      }
+      @include display-md(){
+        flex-direction: column;
+        align-items: center;
+        dl {
+          & + dl {
+            margin-left:0;
+          }
+        }
+      }
+      .copyright {
+        color:#646577;
+        font-size:16px;
+        margin-left:auto;
+        @include display-md(){
+          margin-left :0;
+          font-size:REM(27px / 3);
+        }
+      }
+    }
+    .tel {
+      position:relative;
+      padding-left:20px;
+      &:before{
+        content:"T.";
+        font-weight:900;
+        position:absolute;
+        left:0;
+        top:6px;
+        color:#fff;
+        font-size:17px;
+      }
+      @include display-md(){
+        padding-left:REM(45px / 3);
+        &:before{
+          margin-left :0;
+          font-size:REM(30px / 3);
+          left:REM(9px / 3);
+          top:10px;
+          line-height: 1;
+        }
+      }
+      a {
+        color:#fff;
+      }
+    }
+  }
+}

src/scss/common/_layout.scss

@@ -1,3 +1,347 @@
 /***************************************************************************************
  * 레이아웃
- ****************************************************************************************/
+ ****************************************************************************************/
+
+
+
+body {
+  font-family: "Pretendard", 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;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-style: normal;
+  text-rendering: geometricPrecision;
+}
+.device-pc {
+  display: block;
+  @include display-md() {
+    display: none;
+  }
+}
+.device-mobile {
+  display: none;
+  @include display-md() {
+    display: block;
+  }
+}
+//햄버거바
+.all-menu {
+  position: absolute;
+  width: 50px;
+  top: 50%;
+  right: -61px;
+  transform: translateY(-50%);
+  cursor: pointer;
+  display: none;
+  .nav-bar1 {
+    width: 25px;
+    height: 6px;
+    background: #000;
+    border: 1px solid #dfdfdf;
+  }
+  .nav-bar2 {
+    width: 30px;
+    height: 6px;
+    background: #000;
+    border: 1px solid #dfdfdf;
+    margin: 4px 0;
+  }
+}
+.section {
+  .container{
+    max-width: 1200px;
+    margin: 0 auto;
+    position: relative;
+  }
+}
+footer {
+  .container {
+    max-width: 1200px;
+    margin: 0 auto;
+    position: relative;
+  }
+}
+
+//소개할 때 상단 작은글씨
+.text-header {
+  h1 {
+    font-size: 21px;
+    font-weight: 300;
+  }
+}
+//----------------------------
+#burger{
+  display:none;
+}
+
+.main-header {
+  padding: 10px 0;
+  width:100%;
+  position:fixed;
+  top:0;
+  background-color:#fff;
+  z-index:100;
+  box-shadow: 1px -2px 12px #dadada;
+  .container {
+    max-width: 1200px;
+    margin: 0 auto;
+    @include display-flex();
+    .logo {
+      @include display-flex();
+      align-items: center;
+      justify-content: center;
+      .logo-img {
+        display: inline-block;
+        width: 200px;
+        height: 35px;
+        background-image: url("../images/logo.svg");
+        background-repeat:no-repeat;
+        text-indent:-99999px;
+        overflow: hidden;
+        @include display-md(){
+          width: REM(420px / 3);
+          height: REM(60px / 3);
+          margin-left:REM(30px / 3);
+        }
+      }
+    }
+    .nav-container {
+      width: 100%;
+      @include display-flex();
+    }
+    .gnb-nav {
+      width: 100%;
+      background: #fff;
+      .nav-header {
+        display: none;
+      }
+      .gnb-nav-wrap {
+        @include display-flex();
+        align-items: center;
+        justify-content: flex-end;
+        white-space: nowrap;
+        height: 100%;
+        width: 100%;
+        @include display-md(){
+          justify-content: center;
+        }
+        li {
+          & + li {
+            margin-left:REM(20px / 3);
+          }
+          a {
+            display: inline-block;
+            font-size: 20px;
+            padding: 18px 5px;
+            font-weight: 700;
+            letter-spacing: -.025em;
+            @include display-md(){
+              font-size:REM(45px / 3);
+            }
+          }
+
+        }
+      }
+    }
+    .hidden {
+      display: none;
+    }
+  }
+}
+
+
+@include display-md(){
+  .main-header {
+    padding:REM(45px / 3) 0;
+  }
+  .is-scroll{
+    .main-header{
+      height:100%;
+    }
+  }
+  #burger{
+    display:block;
+    position:absolute;
+    right: REM(21px / 3);
+    top:REM(21px / 3);
+    font-family: $font-en-family-base;
+    color:#000;
+    .burger-text {
+      display:block;
+      line-height:1;
+      font-size:REM(30px / 3);
+      margin-top:REM(12px / 3);
+    }
+    &.is-open{
+      color:#fff;
+      .burger{
+        background:#fff;
+        &:before,
+        &:after{
+          background:#fff;
+        }
+      }
+    }
+  }
+
+  /* Main menu positionning */
+  .main-nav {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    text-align: center;
+    background: #FFF;
+    opacity: 0;
+    z-index: -1;
+    visibility: hidden;
+    transition: all .375s;
+  }
+
+  .main-nav.is-open {
+    opacity: 1;
+    z-index: 100;
+    visibility: visible;
+    .nav-container {
+      display:block;
+    }
+  }
+
+  /* Yellow band effect */
+  .main-nav::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: REM(-45px / 3);
+    background-image:linear-gradient(#32f8ff,#4636ff,#000);
+    transform-origin: 0 0;
+    transform: translateX(-120%);
+    transition: all .275s .1s;
+  }
+
+  .main-nav.is-open::before {
+    transform:translateX(0);
+  }
+
+  /* Skewing effect on menu links */
+  .main-nav ul {
+    display: inline-flex;
+    flex-direction: column;
+    height: 93%; /* Should be 100%, but we have a notice message :D */
+    align-items: flex-end;
+    justify-content: center;
+    padding-bottom:REM(300px / 3);
+  }
+
+  .main-nav li {
+    display: block;
+    margin: .5rem 0;
+    text-align: right;
+  }
+
+  /* Apparition effect on links */
+  .main-nav a {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+
+  .main-nav.is-open a {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  .main-nav li:nth-child(1) a {
+    transition: all 275ms 175ms
+  }
+  .main-nav li:nth-child(2) a {
+    transition: all 275ms 225ms
+  }
+  .main-nav li:nth-child(3) a {
+    transition: all 275ms 275ms
+  }
+  .main-nav li:nth-child(4) a {
+    transition: all 275ms 325ms
+  }
+  .main-nav li:nth-child(5) a {
+    transition: all 275ms 375ms
+  }
+  .main-nav li:nth-child(6) a {
+    transition: all 275ms 400ms
+  }
+
+
+  /* Decoration */
+  .main-nav ul,
+  .main-nav li {
+    list-style: none;
+    padding: 0;
+  }
+  .main-nav a {
+    display: block;
+    padding: REM(36px / 3) 0;
+    color:#fff;
+    font-size: REM(42px / 3);
+    text-decoration: none;
+    font-weight: bold;
+  }
+
+  /* Burger Style: @see: https://codepen.io/CreativeJuiz/full/oMZNXy */
+  .open-main-nav {
+    position: absolute;
+    top: REM(45px / 3);
+    padding-top: REM(60px / 3);
+    right: REM(45px / 3);
+    z-index: 1000;
+    background: none;
+    border: 0;
+    cursor: pointer;
+  }
+  .open-main-nav:focus {
+    outline: none;
+  }
+  .burger {
+    position: relative;
+    display: block;
+    width: REM(75px / 3);
+    height: REM(9px / 3);
+    margin: 0 auto;
+    background: #000;
+    transform: skew(5deg);
+    transition: all .275s;
+  }
+
+  .burger:after,
+  .burger:before {
+    content: '';
+    display: block;
+    height: 100%;
+    background: #000;
+    transition: all .275s;
+  }
+
+  .burger:after {
+    transform: translateY(REM(-26px / 3)) translateX(-6px) skew(-20deg);
+  }
+
+  .burger:before {
+    transform: translateY(REM(-36px / 3)) skew(-10deg);
+  }
+
+  /* Toggle State part */
+  .is-open .burger {
+    transform: skew(5deg) translateY(REM(-24px / 3)) rotate(-40deg);
+  }
+
+  .is-open .burger:before {
+    transform: translateY(0px) skew(-10deg) rotate(75deg);
+  }
+
+  .is-open .burger:after {
+    transform: translateY(REM(-36px / 3)) translateX(REM(30px / 3)) skew(-20deg);
+    opacity: 0;
+  }
+}
+
+
+

src/scss/common/_utility.scss

@@ -32,7 +32,7 @@
   }
 }
 
-@for $i from 1 to 100{
+@for $i from 1 to 120{
   .W#{$i * 5} {
     width: 5px * $i !important;
   }
@@ -40,36 +40,66 @@
     height:5px * $i !important;
   }
 }
-@for $i from 0 to 21 {
+@for $i from 0 to 30 {
   .M#{$i * 5} {
     margin:5px * $i !important;
+    @include display-md(){
+      margin : calc((5px / $font-size-base ) / 3 * $i) + rem !important;
+    }
   }
   .MT#{$i * 5} {
     margin-top:5px * $i !important;
+    @include display-md(){
+      margin-top : calc((5px / $font-size-base ) / 3 * $i) + rem !important;
+    }
   }
   .MR#{$i*5} {
     margin-right:5px * $i !important;
+    @include display-md(){
+      margin-right : calc((5px / $font-size-base ) / 3 * $i) + rem !important;
+    }
   }
   .MB#{$i * 5} {
     margin-bottom:5px * $i !important;
+    @include display-md(){
+      margin-bottom : calc((5px / $font-size-base ) / 3 * $i) + rem !important;
+    }
   }
   .ML#{$i * 5} {
     margin-left:5px * $i !important;
+    @include display-md(){
+      margin-left : calc((5px / $font-size-base ) / 3 * $i) + rem !important;
+    }
   }
   .PT#{$i * 5} {
     padding-top:5px * $i !important;
+    @include display-md(){
+      padding-top : calc((5px / $font-size-base ) / 3 * $i) + rem !important;
+    }
   }
   .PR#{$i * 5} {
     padding-right:5px * $i !important;
+    @include display-md(){
+      padding-right : calc((5px / $font-size-base ) / 3 * $i) + rem !important;
+    }
   }
   .PB#{$i * 5} {
     padding-bottom:5px * $i !important;
+    @include display-md(){
+      padding-bottom : calc((5px / $font-size-base ) / 3 * $i) + rem !important;
+    }
   }
   .PL#{$i * 5} {
     padding-left:5px * $i !important;
+    @include display-md(){
+      padding-left : calc((5px / $font-size-base ) / 3 * $i) + rem !important;
+    }
   }
   .P#{$i * 5} {
     padding:5px * $i !important;
+    @include display-md(){
+      padding : calc((5px / $font-size-base ) / 3 * $i) + rem !important;
+    }
   }
 }
 

src/scss/style.scss

@@ -25,4 +25,5 @@
 @import "plugins/custom";
 
 // 레이아웃 및 각 페이지 SCSS 파일
-@import 'pages/main';
+@import 'pages/main';
+@import 'common/footer';