diff --git a/README.md b/README.md
index cc6a3b23..f5f6466a 100644
--- a/README.md
+++ b/README.md
@@ -1,45 +1,91 @@
-[참고 내용]
+## 💊 알툴즈 홈페이지 클론코딩 💊
 
-👀 자신이 원하는 사이트 레이아웃 클론
-원하는 사이트(페이지)를 자유롭게 선택하고 레이아웃을 클론 코딩하세요.
-평소에 도전해 보고 싶었거나 혹은 자신의 수준에 맞는 사이트(페이지)를 선택하세요.
-과제 수행 및 리뷰 기간은 별도 공지를 참고하세요!
+---
 
-과제 수행 및 제출 방법
+🧷 알툴즈 url : https://altools.co.kr/
 
-1. 현재 저장소를 로컬에 클론(Clone)합니다.
-2. 자신의 본명으로 브랜치를 생성합니다.(구분 가능하도록 본명을 꼭 파스칼케이스로 표시하세요, git branch KDT0_이름)
-3. 자신의 본명 브랜치에서 과제를 수행합니다.
-4. 과제 수행이 완료되면, 자신의 본명 브랜치를 원격 저장소에 푸시(Push)합니다.(main 브랜치에 푸시하지 않도록 꼭 주의하세요, git push origin KDT0_이름)
-5. 저장소에서 main 브랜치를 대상으로 Pull Request 생성하면, 과제 제출이 완료됩니다!(E.g, main <== KDT0_이름)
+🧷 알툴즈 클론코딩 url : https://64c3784440213655395c11f1--friendly-cendol-995833.netlify.app/
 
+### 🗓️ 과제 기간
 
-- main 혹은 다른 사람의 브랜치로 절대 병합하지 않도록 주의하세요!
-- Pull Request에서 보이는 설명을 다른 사람들이 이해하기 쉽도록 꼼꼼하게 작성하세요!
-- Pull Request에서 과제 제출 후 절대 병합(Merge)하지 않도록 주의하세요!
-- 과제 수행 및 제출 과정에서 문제가 발생한 경우, 바로 담당 멘토나 강사에서 얘기하세요!
+---
 
-필수 요구사항
+2023.07.24 ~ 2023.07.28
 
-- 과제에 대한 설명을 포함한 README.md 파일을 제공하세요!
-- 과제 결과와 비교할 수 있는 실제 사이트(페이지)의 주소를 명시하세요!
-- 과정에서 사용한 프로젝트 폴더/파일이 모두 포함돼야 합니다, 일부 파일만 제출하지 마세요!
-- 실제 서비스로 배포하고 접근 가능한 링크를 추가해야 합니다.
+### 🌀 과제 요구사항
 
-선택 요구사항
+---
 
-- < header >, < section > 등 시멘틱 태그를 최대한 활용해보세요.
-- 실제 사이트의 레거시 코드 활용보단 최신의 CSS Flex 혹은 Grid 등을 활용해보세요.
-- 부분적으로 BEM 방법론을 도입해보세요.
-- JS가 필요한 부분은 되도록 생략하되 이유를 명시해보세요.(CSS로 대체 가능한지 피드백이 있을 수 있겠죠?!)
-- JS가 필요한 부분 중 구현할 부분이 있다면 자유롭게 구현해보세요.(JS 과제가 아니니까 가볍게 구현하시길 추천해요)
+#### 필수 요구사항
 
-손쉬운 이미지 추출 방법
+[✔️] 과제에 대한 설명을 포함한 `README.md` 파일을 제공하세요!
 
-사이트 클론에 필요한 이미지를 좀 더 쉽게 추출하기 위해서 Chrome 확장 프로그램인 Image Downloader를 사용하세요.
+[✔️] 과제 결과와 비교할 수 있는 실제 사이트(페이지)의 주소를 명시하세요!
 
-1. 원하는 사이트 접속
-2. Image Downloader 확장 프로그램 실행
-3. 다운로드 원하는 이미지 선택
-4. 서브 폴더 이름(Save to subfolder) 명시
-5. 다운로드!
+[✔️] 과정에서 사용한 프로젝트 폴더/파일이 모두 포함돼야 합니다, 일부 파일만 제출하지 마세요!
+
+[✔️] 실제 서비스로 배포하고 접근 가능한 링크를 추가해야 합니다.
+
+#### 선택 요구사항
+
+[✔️] `<header>`, `<section>` 등 시멘틱 태그를 최대한 활용해보세요.
+
+[✔️] 실제 사이트의 레거시 코드 활용보단 최신의 CSS Flex 혹은 Grid 등을 활용해보세요.
+
+[ ] 부분적으로 BEM 방법론을 도입해보세요.
+
+[✔️] JS가 필요한 부분은 되도록 생략하되 이유를 명시해보세요.(CSS로 대체 가능한지 피드백이 있을 수 있겠죠?!)
+
+[✔️] JS가 필요한 부분 중 구현할 부분이 있다면 자유롭게 구현해보세요.(JS 과제가 아니니까 가볍게 구현하시길 추천해요)
+
+[ ] SCSS 등의 CSS 전처리도구를 도입해보세요.
+
+[ ] SCSS 컴파일에 Webpack이나 Parcel 같은 번들러를 활용해보세요.
+
+### 🖥️ 화면 구성
+
+---
+
+| 메인화면1 (section home)                                                                                                                                                                                   | section AD-ZERO                                                                                       |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
+| ![](https://velog.velcdn.com/images/wkdtnqls0506/post/e27ffad6-b274-45be-9405-6167aad066dd/image.png)![](https://velog.velcdn.com/images/wkdtnqls0506/post/c0a8b877-8e49-4ea8-8222-f3d18bc11755/image.png) | ![](https://velog.velcdn.com/images/wkdtnqls0506/post/d3176258-25ee-452b-99c4-9cd4b96f9e1a/image.png) |
+
+| section license                                                                                       | section altools-list                                                                                  |
+| ----------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
+| ![](https://velog.velcdn.com/images/wkdtnqls0506/post/f40e77af-b30c-4f0c-a6be-92ee87a19e66/image.png) | ![](https://velog.velcdn.com/images/wkdtnqls0506/post/342c7170-e2ae-4fae-b3db-67c47782c7d3/image.png) |
+
+| section slide                                                                                         | section grid                                                                                          |
+| ----------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
+| ![](https://velog.velcdn.com/images/wkdtnqls0506/post/38e887f2-4e31-4019-9738-3809b882f22a/image.png) | ![](https://velog.velcdn.com/images/wkdtnqls0506/post/45cd9aee-3f43-489c-8462-6f033cec4aa8/image.png) |
+
+| section etc & Footer                                                                                  |
+| ----------------------------------------------------------------------------------------------------- |
+| ![](https://velog.velcdn.com/images/wkdtnqls0506/post/58a6384c-8aeb-46c1-9335-466f3f3d7031/image.png) |
+
+- Header, Main(7개의 section으로 구성), Footer 나누어 html 작성
+
+### ✔️ JavaScript를 활용한 구현
+
+---
+
+![](https://velog.velcdn.com/images/wkdtnqls0506/post/871303f8-d0f3-4d3f-a9ac-95fd929fa98a/image.gif)
+
+- header의 세로 길이를 HTMLElement.offsetHeight 속성을 이용하여 요소의 높이를 정수로 받아옵니다.
+- Window 인터페이스의 scrollY를 사용하여 문서가 수직으로 얼마나 스크롤 됐는지 픽셀값으로 반환한 후
+- HTMLElement.offsetHeight 속성을 이용하여 가져온 header의 높이와 window.scrollY의 값을 비교하여
+  - window.scrollY의 높이가 더 클 경우엔 배경색이 바뀔 수 있는 class를 추가해줍니다.
+  - window.scrollY의 높이가 더 작을 경우엔 추가했던 class를 삭제합니다.
+
+### 📖 더 보완해야 할 점
+
+---
+
+◻️ 이미지 슬라이드 부분의 구현 - css로만 구현하려고 하니 꽤나 복잡해서 이미지만 삽입했습니다..🥲
+
+◻️ 반응형 모바일 웹 사이트도 구현해보기
+
+◻️ css를 작성할 때, 공통이 되는 부분은 root를 사용하여 자주 쓰는 조건들을 따로 변수로 설정하기
+
+◻️ html을 좀 더 간결하게 표현될 수 있도록 수정하기
+
+◻️ html class 이름을 좀 더 직관적으로 보일 수 있게 보완하기
diff --git a/Y_FE_HTML_CSS b/Y_FE_HTML_CSS
new file mode 160000
index 00000000..8894f398
--- /dev/null
+++ b/Y_FE_HTML_CSS
@@ -0,0 +1 @@
+Subproject commit 8894f3983539c63b7f7e73450010bd81203ae29d
diff --git a/images/banner_main_1.png b/images/banner_main_1.png
new file mode 100644
index 00000000..e88a6af2
Binary files /dev/null and b/images/banner_main_1.png differ
diff --git a/images/banner_main_1_3x.png b/images/banner_main_1_3x.png
new file mode 100644
index 00000000..93ad865f
Binary files /dev/null and b/images/banner_main_1_3x.png differ
diff --git a/images/banner_main_2.png b/images/banner_main_2.png
new file mode 100644
index 00000000..837a9eb4
Binary files /dev/null and b/images/banner_main_2.png differ
diff --git a/images/banner_main_2_3x.png b/images/banner_main_2_3x.png
new file mode 100644
index 00000000..588b5140
Binary files /dev/null and b/images/banner_main_2_3x.png differ
diff --git a/images/banner_main_3.png b/images/banner_main_3.png
new file mode 100644
index 00000000..9446025f
Binary files /dev/null and b/images/banner_main_3.png differ
diff --git a/images/banner_main_3_3x.png b/images/banner_main_3_3x.png
new file mode 100644
index 00000000..8aa8f337
Binary files /dev/null and b/images/banner_main_3_3x.png differ
diff --git a/images/bg_adzero.59f100d4.png b/images/bg_adzero.59f100d4.png
new file mode 100644
index 00000000..792fe25e
Binary files /dev/null and b/images/bg_adzero.59f100d4.png differ
diff --git a/images/bg_business.8752c5a0.png b/images/bg_business.8752c5a0.png
new file mode 100644
index 00000000..f149aa3c
Binary files /dev/null and b/images/bg_business.8752c5a0.png differ
diff --git a/images/bg_gridBox_1.81b08ab0.png b/images/bg_gridBox_1.81b08ab0.png
new file mode 100644
index 00000000..10671399
Binary files /dev/null and b/images/bg_gridBox_1.81b08ab0.png differ
diff --git a/images/bg_gridBox_2.d7a18463.png b/images/bg_gridBox_2.d7a18463.png
new file mode 100644
index 00000000..7cae3029
Binary files /dev/null and b/images/bg_gridBox_2.d7a18463.png differ
diff --git a/images/bg_gridBox_2.pdf.png b/images/bg_gridBox_2.pdf.png
new file mode 100644
index 00000000..c1c6d4d7
Binary files /dev/null and b/images/bg_gridBox_2.pdf.png differ
diff --git a/images/bg_gridBox_3.91b1293b.png b/images/bg_gridBox_3.91b1293b.png
new file mode 100644
index 00000000..b0b6dc80
Binary files /dev/null and b/images/bg_gridBox_3.91b1293b.png differ
diff --git a/images/bg_gridBox_4.26f2acda.png b/images/bg_gridBox_4.26f2acda.png
new file mode 100644
index 00000000..ad20da9d
Binary files /dev/null and b/images/bg_gridBox_4.26f2acda.png differ
diff --git "a/images/bg_gridBox_4.\355\214\214\354\235\274\353\252\205.png" "b/images/bg_gridBox_4.\355\214\214\354\235\274\353\252\205.png"
new file mode 100644
index 00000000..7a7994ae
Binary files /dev/null and "b/images/bg_gridBox_4.\355\214\214\354\235\274\353\252\205.png" differ
diff --git a/images/bg_gridBox_5.b11379ab.png b/images/bg_gridBox_5.b11379ab.png
new file mode 100644
index 00000000..32e45b1d
Binary files /dev/null and b/images/bg_gridBox_5.b11379ab.png differ
diff --git "a/images/bg_gridBox_5.\354\225\214\354\224\250.png" "b/images/bg_gridBox_5.\354\225\214\354\224\250.png"
new file mode 100644
index 00000000..9f015e93
Binary files /dev/null and "b/images/bg_gridBox_5.\354\225\214\354\224\250.png" differ
diff --git a/images/bg_news.png b/images/bg_news.png
new file mode 100644
index 00000000..64fff4cc
Binary files /dev/null and b/images/bg_news.png differ
diff --git a/images/favicon-32x32.f4f4eaba.png b/images/favicon-32x32.f4f4eaba.png
new file mode 100644
index 00000000..0570a4d3
Binary files /dev/null and b/images/favicon-32x32.f4f4eaba.png differ
diff --git a/images/icon_120_alan.png b/images/icon_120_alan.png
new file mode 100644
index 00000000..dca7e519
Binary files /dev/null and b/images/icon_120_alan.png differ
diff --git a/images/icon_120_aldrive.png b/images/icon_120_aldrive.png
new file mode 100644
index 00000000..45fe7492
Binary files /dev/null and b/images/icon_120_aldrive.png differ
diff --git a/images/icon_120_alpdf.png b/images/icon_120_alpdf.png
new file mode 100644
index 00000000..045fd954
Binary files /dev/null and b/images/icon_120_alpdf.png differ
diff --git a/images/icon_120_alsee.png b/images/icon_120_alsee.png
new file mode 100644
index 00000000..b9eb0666
Binary files /dev/null and b/images/icon_120_alsee.png differ
diff --git a/images/icon_120_alsong.png b/images/icon_120_alsong.png
new file mode 100644
index 00000000..136e59e3
Binary files /dev/null and b/images/icon_120_alsong.png differ
diff --git a/images/icon_120_alsongMobile.png b/images/icon_120_alsongMobile.png
new file mode 100644
index 00000000..08368507
Binary files /dev/null and b/images/icon_120_alsongMobile.png differ
diff --git a/images/icon_120_alyac.png b/images/icon_120_alyac.png
new file mode 100644
index 00000000..7dbaef26
Binary files /dev/null and b/images/icon_120_alyac.png differ
diff --git a/images/icon_120_alyacMobile.png b/images/icon_120_alyacMobile.png
new file mode 100644
index 00000000..8d5bfa5f
Binary files /dev/null and b/images/icon_120_alyacMobile.png differ
diff --git a/images/icon_120_alzip.png b/images/icon_120_alzip.png
new file mode 100644
index 00000000..76cc6056
Binary files /dev/null and b/images/icon_120_alzip.png differ
diff --git a/images/icon_120_alzipMobile.png b/images/icon_120_alzipMobile.png
new file mode 100644
index 00000000..fb7f10c1
Binary files /dev/null and b/images/icon_120_alzipMobile.png differ
diff --git a/images/icon_120_picnicMobile.png b/images/icon_120_picnicMobile.png
new file mode 100644
index 00000000..53da4a48
Binary files /dev/null and b/images/icon_120_picnicMobile.png differ
diff --git a/images/icon_120_psp.png b/images/icon_120_psp.png
new file mode 100644
index 00000000..4fea813b
Binary files /dev/null and b/images/icon_120_psp.png differ
diff --git "a/images/icon_120_\354\225\214\354\272\241\354\263\220.png" "b/images/icon_120_\354\225\214\354\272\241\354\263\220.png"
new file mode 100644
index 00000000..8c938fa3
Binary files /dev/null and "b/images/icon_120_\354\225\214\354\272\241\354\263\220.png" differ
diff --git a/images/icon_blog.d455c7a6.png b/images/icon_blog.d455c7a6.png
new file mode 100644
index 00000000..52165b55
Binary files /dev/null and b/images/icon_blog.d455c7a6.png differ
diff --git a/images/icon_estsecurity.9280af33.png b/images/icon_estsecurity.9280af33.png
new file mode 100644
index 00000000..4f1d97c7
Binary files /dev/null and b/images/icon_estsecurity.9280af33.png differ
diff --git a/images/icon_estsoft.1d5ce93a.png b/images/icon_estsoft.1d5ce93a.png
new file mode 100644
index 00000000..e5e110a4
Binary files /dev/null and b/images/icon_estsoft.1d5ce93a.png differ
diff --git a/images/icon_pc_altools.png b/images/icon_pc_altools.png
new file mode 100644
index 00000000..7206b305
Binary files /dev/null and b/images/icon_pc_altools.png differ
diff --git "a/images/icon_\354\225\214PDF.png" "b/images/icon_\354\225\214PDF.png"
new file mode 100644
index 00000000..045fd954
Binary files /dev/null and "b/images/icon_\354\225\214PDF.png" differ
diff --git "a/images/icon_\354\225\214\353\223\234\353\235\274\354\235\264\353\270\214.png" "b/images/icon_\354\225\214\353\223\234\353\235\274\354\235\264\353\270\214.png"
new file mode 100644
index 00000000..45fe7492
Binary files /dev/null and "b/images/icon_\354\225\214\353\223\234\353\235\274\354\235\264\353\270\214.png" differ
diff --git "a/images/icon_\354\225\214\354\206\241.png" "b/images/icon_\354\225\214\354\206\241.png"
new file mode 100644
index 00000000..136e59e3
Binary files /dev/null and "b/images/icon_\354\225\214\354\206\241.png" differ
diff --git "a/images/icon_\354\225\214\354\224\250.png" "b/images/icon_\354\225\214\354\224\250.png"
new file mode 100644
index 00000000..b9eb0666
Binary files /dev/null and "b/images/icon_\354\225\214\354\224\250.png" differ
diff --git "a/images/icon_\354\225\214\354\225\275.png" "b/images/icon_\354\225\214\354\225\275.png"
new file mode 100644
index 00000000..7dbaef26
Binary files /dev/null and "b/images/icon_\354\225\214\354\225\275.png" differ
diff --git "a/images/icon_\354\225\214\354\247\221.png" "b/images/icon_\354\225\214\354\247\221.png"
new file mode 100644
index 00000000..76cc6056
Binary files /dev/null and "b/images/icon_\354\225\214\354\247\221.png" differ
diff --git "a/images/icon_\354\225\214\354\272\241\354\263\220.png" "b/images/icon_\354\225\214\354\272\241\354\263\220.png"
new file mode 100644
index 00000000..8c938fa3
Binary files /dev/null and "b/images/icon_\354\225\214\354\272\241\354\263\220.png" differ
diff --git "a/images/icon_\355\206\265\355\225\251\355\214\251.png" "b/images/icon_\355\206\265\355\225\251\355\214\251.png"
new file mode 100644
index 00000000..5faea0c2
Binary files /dev/null and "b/images/icon_\355\206\265\355\225\251\355\214\251.png" differ
diff --git a/images/img_mainSlide_1.98cc2793.png b/images/img_mainSlide_1.98cc2793.png
new file mode 100644
index 00000000..d6f12956
Binary files /dev/null and b/images/img_mainSlide_1.98cc2793.png differ
diff --git a/images/img_mainSlide_1_3x.c51bd0ec.png b/images/img_mainSlide_1_3x.c51bd0ec.png
new file mode 100644
index 00000000..3c594628
Binary files /dev/null and b/images/img_mainSlide_1_3x.c51bd0ec.png differ
diff --git a/images/img_mainSlide_2.29a39dd2.png b/images/img_mainSlide_2.29a39dd2.png
new file mode 100644
index 00000000..8e5d5ca1
Binary files /dev/null and b/images/img_mainSlide_2.29a39dd2.png differ
diff --git a/images/img_mainSlide_2_3x.3dad0c1a.png b/images/img_mainSlide_2_3x.3dad0c1a.png
new file mode 100644
index 00000000..b25e399b
Binary files /dev/null and b/images/img_mainSlide_2_3x.3dad0c1a.png differ
diff --git a/images/img_mainSlide_3.fe8eba3d.png b/images/img_mainSlide_3.fe8eba3d.png
new file mode 100644
index 00000000..feff60a4
Binary files /dev/null and b/images/img_mainSlide_3.fe8eba3d.png differ
diff --git a/images/img_mainSlide_3_3x.0a6c8269.png b/images/img_mainSlide_3_3x.0a6c8269.png
new file mode 100644
index 00000000..e963847a
Binary files /dev/null and b/images/img_mainSlide_3_3x.0a6c8269.png differ
diff --git "a/images/img_\354\225\214PDF.png" "b/images/img_\354\225\214PDF.png"
new file mode 100644
index 00000000..f18a0c37
Binary files /dev/null and "b/images/img_\354\225\214PDF.png" differ
diff --git "a/images/img_\354\225\214\353\223\234\353\235\274\354\235\264\353\270\214.png" "b/images/img_\354\225\214\353\223\234\353\235\274\354\235\264\353\270\214.png"
new file mode 100644
index 00000000..60ff7424
Binary files /dev/null and "b/images/img_\354\225\214\353\223\234\353\235\274\354\235\264\353\270\214.png" differ
diff --git "a/images/img_\354\225\214\354\206\241.png" "b/images/img_\354\225\214\354\206\241.png"
new file mode 100644
index 00000000..1064edfa
Binary files /dev/null and "b/images/img_\354\225\214\354\206\241.png" differ
diff --git "a/images/img_\354\225\214\354\224\250.png" "b/images/img_\354\225\214\354\224\250.png"
new file mode 100644
index 00000000..d7373f18
Binary files /dev/null and "b/images/img_\354\225\214\354\224\250.png" differ
diff --git "a/images/img_\354\225\214\354\225\275.png" "b/images/img_\354\225\214\354\225\275.png"
new file mode 100644
index 00000000..1e465e5c
Binary files /dev/null and "b/images/img_\354\225\214\354\225\275.png" differ
diff --git "a/images/img_\354\225\214\354\247\221.png" "b/images/img_\354\225\214\354\247\221.png"
new file mode 100644
index 00000000..f3f000b0
Binary files /dev/null and "b/images/img_\354\225\214\354\247\221.png" differ
diff --git "a/images/img_\354\225\214\354\272\241\354\263\220.png" "b/images/img_\354\225\214\354\272\241\354\263\220.png"
new file mode 100644
index 00000000..226b2f26
Binary files /dev/null and "b/images/img_\354\225\214\354\272\241\354\263\220.png" differ
diff --git "a/images/img_\354\225\214\355\206\265\355\225\251\355\214\251.png" "b/images/img_\354\225\214\355\206\265\355\225\251\355\214\251.png"
new file mode 100644
index 00000000..60c24916
Binary files /dev/null and "b/images/img_\354\225\214\355\206\265\355\225\251\355\214\251.png" differ
diff --git a/images/sns_facebook.png b/images/sns_facebook.png
new file mode 100644
index 00000000..477b205b
Binary files /dev/null and b/images/sns_facebook.png differ
diff --git a/images/sns_home.png b/images/sns_home.png
new file mode 100644
index 00000000..816281c5
Binary files /dev/null and b/images/sns_home.png differ
diff --git a/images/sns_message.png b/images/sns_message.png
new file mode 100644
index 00000000..4fc90e33
Binary files /dev/null and b/images/sns_message.png differ
diff --git a/images/spr_footer_icon.e708fb81.png b/images/spr_footer_icon.e708fb81.png
new file mode 100644
index 00000000..8c72de4b
Binary files /dev/null and b/images/spr_footer_icon.e708fb81.png differ
diff --git a/images/spr_logo_estsoft.722c4838.png b/images/spr_logo_estsoft.722c4838.png
new file mode 100644
index 00000000..e402b6e2
Binary files /dev/null and b/images/spr_logo_estsoft.722c4838.png differ
diff --git "a/images/\354\230\244\353\245\270\354\252\275 \355\231\224\354\202\264\355\221\234.png" "b/images/\354\230\244\353\245\270\354\252\275 \355\231\224\354\202\264\355\221\234.png"
new file mode 100644
index 00000000..04140ffc
Binary files /dev/null and "b/images/\354\230\244\353\245\270\354\252\275 \355\231\224\354\202\264\355\221\234.png" differ
diff --git "a/images/\354\231\274\354\252\275 \355\231\224\354\202\264\355\221\234.png" "b/images/\354\231\274\354\252\275 \355\231\224\354\202\264\355\221\234.png"
new file mode 100644
index 00000000..1b9a5fcf
Binary files /dev/null and "b/images/\354\231\274\354\252\275 \355\231\224\354\202\264\355\221\234.png" differ
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..189386d8
--- /dev/null
+++ b/index.html
@@ -0,0 +1,700 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>알툴즈 | 내 PC 필수품</title>
+    <link
+      rel="icon"
+      type="image/png"
+      href="images/favicon-32x32.f4f4eaba.png"
+    />
+    <script
+      src="https://kit.fontawesome.com/4ee7f6a3e5.js"
+      crossorigin="anonymous"
+      ></script>
+    <script type="module" src="./main.js" defer></script>
+    <link rel="stylesheet" href="./styles/style.css" />
+  </head>
+  <body>
+    <!-- Header -->
+    <header class="header">
+      <a href="#" class="header__logo">ALTools</a>
+      <nav class="header__nav">
+        <ul class="header__menu">
+          <li class="header__menu__item menu1">
+            알툴즈 다운로드&nbsp;&nbsp;<span class="down">▼</span>
+            <div class="hover__menu1">
+              <div class="hover__menu1__container">
+                <div class="menu1__container">
+                  <p class="menu1__title">Tool</p>
+                  <ul class="hover__tool">
+                    <li class="hover__tool__item">
+                      <img class="tool__item__img" src="./images/icon_알집.png" />
+                      <div class="tool__item__box">
+                        <p class="tool__item__title">알집</p>
+                        <p class="tool__item__text">전국민 압축프로그램</p>
+                      </div>
+                    </li>
+                    <li class="hover__tool__item">
+                      <img
+                        class="tool__item__img"
+                        src="./images/icon_알캡쳐.png"
+                      />
+                      <div class="tool__item__box">
+                        <p class="tool__item__title">알캡쳐</p>
+                        <p class="tool__item__text">쉽고 빠른 화면 캡쳐</p>
+                      </div>
+                    </li>
+                    <li class="hover__tool__item">
+                      <img
+                        class="tool__item__img"
+                        src="./images/icon_알드라이브.png"
+                      />
+                      <div class="tool__item__box">
+                        <p class="tool__item__title">알드라이브</p>
+                        <p class="tool__item__text">
+                          편리한 파일 전송 클라이언트
+                        </p>
+                      </div>
+                    </li>
+                    <p class="menu1__title security">Security</p>
+                    <ul class="hover__tool">
+                      <li class="hover__tool__item">
+                        <img class="tool__item__img" src="./images/icon_알약.png" />
+                        <div class="tool__item__box">
+                          <p class="tool__item__title">알약</p>
+                          <p class="tool__item__text">전국민 백신 프로그램</p>
+                        </div>
+                      </li>
+                    </ul>
+                </div>
+                <div class="menu1__container">
+                  <p class="menu1__title">Contents</p>
+                  <ul class="hover__tool">
+                    <li class="hover__tool__item">
+                      <img class="tool__item__img" src="./images/icon_알씨.png" />
+                      <div class="tool__item__box">
+                        <p class="tool__item__title">알씨</p>
+                        <p class="tool__item__text">
+                          이미지 뷰어/사진 편집 프로그램
+                        </p>
+                      </div>
+                    </li>
+                    <li class="hover__tool__item">
+                      <img
+                        class="tool__item__img"
+                        src="./images/icon_알PDF.png"
+                      />
+                      <div class="tool__item__box">
+                        <p class="tool__item__title">알PDF</p>
+                        <p class="tool__item__text">
+                          PDF 뷰어/리더, PDF 변환/편집
+                        </p>
+                      </div>
+                    </li>
+                    <li class="hover__tool__item">
+                      <img class="tool__item__img" src="./images/icon_알송.png" />
+                      <div class="tool__item__box">
+                        <p class="tool__item__title">알송</p>
+                        <p class="tool__item__text">온라인 음악가사 플레이어</p>
+                      </div>
+                    </li>
+                    <li class="hover__tool__item">
+                      <img
+                        class="tool__item__img"
+                        src="./images/icon_120_psp.png"
+                      />
+                      <div class="tool__item__box">
+                        <p class="tool__item__title">페인트샵 프로 for 알툴즈</p>
+                        <p class="tool__item__text">
+                          올인원 이미지 편집 프로그램
+                        </p>
+                      </div>
+                    </li>
+                    <li class="hover__tool__item">
+                      <img
+                        class="tool__item__img"
+                        src="./images/icon_120_alan.png"
+                        style="border-radius: 8px"
+                      />
+                      <div class="tool__item__box">
+                        <p class="tool__item__title">앨런 Beta</p>
+                        <p class="tool__item__text">
+                          언제 어디서나 가장 가까운 AI
+                        </p>
+                      </div>
+                    </li>
+                  </ul>
+                </div>
+                <div class="menu1__container">
+                  <p class="menu1__title">Mobile</p>
+                  <ul class="hover__tool">
+                    <li class="hover__tool__item">
+                      <img
+                        class="tool__item__img"
+                        src="./images/icon_120_alzipMobile.png"
+                        style="border-radius: 8px"
+                      />
+                      <div class="tool__item__box">
+                        <p class="tool__item__title">알집 모바일</p>
+                        <p class="tool__item__text">압축 지원 파일 탐색 관리자</p>
+                      </div>
+                    </li>
+                    <li class="hover__tool__item">
+                      <img
+                        class="tool__item__img"
+                        src="./images/icon_120_alsongMobile.png"
+                        style="border-radius: 8px"
+                      />
+                      <div class="tool__item__box">
+                        <p class="tool__item__title">알송 모바일</p>
+                        <p class="tool__item__text">음악과 가사를 동시에</p>
+                      </div>
+                    </li>
+                    <li class="hover__tool__item">
+                      <img
+                        class="tool__item__img"
+                        src="./images/icon_120_alyacMobile.png"
+                        style="border-radius: 8px"
+                      />
+                      <div class="tool__item__box">
+                        <p class="tool__item__title">알약M</p>
+                        <p class="tool__item__text">모바일 그린 라이프</p>
+                      </div>
+                    </li>
+                    <li class="hover__tool__item">
+                      <img
+                        class="tool__item__img"
+                        src="./images/icon_120_picnicMobile.png"
+                        style="border-radius: 8px"
+                      />
+                      <div class="tool__item__box">
+                        <p class="tool__item__title">피크닉</p>
+                        <p class="tool__item__text">맑은 하늘 필터 카메라</p>
+                      </div>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+              <div class="altools__bg">
+                <img class="altools__img" src="./images/icon_pc_altools.png">
+                <div class="altools__box">
+                  <p class="altools__text">알툴즈 모든 제품을 한 번에.</p>
+                  <p class="altools__title">알툴즈 통합팩&nbsp;&nbsp;></p>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li class="header__menu__item">알툴즈 AD-ZERO</li>
+          <li class="header__menu__item">비지니스 구매</li>
+          <li class="header__menu__item menu2">
+            고객센터&nbsp;&nbsp;<span class="down">▼</span>
+            <ul class="hover__menu2">
+              <li class="hover__menu2__item">자주하는 질문</li>
+              <li class="hover__menu2__item">1:1 문의하기</li>
+              <li class="hover__menu2__item">공지사항</li>
+            </ul>
+          </li>
+        </ul>
+      </nav>
+      <button class="header__button">로그인</button>
+    </header>
+    <!-- Main -->
+    <main class="main">
+      <!-- section-home -->
+      <section class="home">
+        <img class="home__img" src="images/img_mainSlide_1_3x.c51bd0ec.png" />
+        <div class="home__img__box">
+          <h2 class="home__img__box__title">
+            알툴즈를 더 쉽게. <br />내 PC 전용 매니저
+          </h2>
+          <p class="home__img__box__text">
+            다양한 알툴즈의 최신 꿀기능을 놓치지 않도록<br />알매니저나 알아서
+            관리할게요.
+          </p>
+          <a
+            class="home__img__box__link"
+            href="https://altools.co.kr/service/notice?no=137"
+            >알매니저 자세히 보기&nbsp;&nbsp; ></a
+          >
+          <div class="home__slide__button">
+            <button class="home__slide__left"><i class="fa-solid fa-angle-left"></i></button>
+            <p class="home__slide__num">1 / 3</p>
+            <button class="home__slide__stop"><i class="fa-solid fa-pause"></i></button>
+            <button class="home__slide__right"><i class="fa-solid fa-angle-right"></i></button>
+          </div>
+        </div>
+        <div class="home__card">
+          <div class="home__card__item">
+            <img class="card__item__img" src="./images/icon_통합팩.png" />
+            <div class="card__item">
+              <span class="card__item__title">알툴즈 통합팩 ></span>
+              <span class="card__item__description"
+                >내PC 사용을 간편하고 편리하게</span
+              >
+            </div>
+          </div>
+          <div class="home__card__item">
+            <img class="card__item__img" src="./images/icon_알집.png" />
+            <div class="card__item">
+              <span class="card__item__title">알집 ></span>
+              <span class="card__item__description">전국민 압축 프로그램</span>
+            </div>
+          </div>
+          <div class="home__card__item">
+            <img class="card__item__img" src="./images/icon_알약.png" />
+            <div class="card__item">
+              <span class="card__item__title">알약 ></span>
+              <span class="card__item__description">전국민 백신프로그램</span>
+            </div>
+          </div>
+          <div class="home__card__item">
+            <img class="card__item__img" src="./images/icon_알씨.png" />
+            <div class="card__item">
+              <span class="card__item__title">알씨 ></span>
+              <span class="card__item__description"
+                >이미지 뷰어, 사진 편집</span
+              >
+            </div>
+          </div>
+          <div class="home__card__item">
+            <img class="card__item__img" src="./images/icon_알캡쳐.png" />
+            <div class="card__item">
+              <span class="card__item__title">알캡쳐 ></span>
+              <span class="card__item__description">쉽고 빠른 화면 캡쳐</span>
+            </div>
+          </div>
+          <div class="home__card__item">
+            <img class="card__item__img" src="./images/icon_알PDF.png" />
+            <div class="card__item">
+              <span class="card__item__title">알PDF ></span>
+              <span class="card__item__description"
+                >PDF 뷰어/리더, PDF 변환/편집</span
+              >
+            </div>
+          </div>
+          <div class="home__card__item">
+            <img class="card__item__img" src="./images/icon_알송.png" />
+            <div class="card__item">
+              <span class="card__item__title">알송 ></span>
+              <span class="card__item__description"
+                >온라인 음악가사 플레이어</span
+              >
+            </div>
+          </div>
+          <div class="home__card__item">
+            <img class="card__item__img" src="./images/icon_알드라이브.png" />
+            <div class="card__item">
+              <span class="card__item__title">알드라이브 ></span>
+              <span class="card__item__description">쉽고 편리한 파일전송</span>
+            </div>
+          </div>
+        </div>
+      </section>
+      <!-- section AD-ZERO -->
+      <section class="AD-ZERO">
+        <img class="AD-ZERO__img" src="./images/bg_adzero.59f100d4.png" />
+        <p class="AD-ZERO__text">
+          광고 없이 쾌적하게 <br />
+          알툴즈의 구독서비스를 확인해 보세요.
+        </p>
+        <a href="#" class="AD-ZERO__button">알툴즈 AD-ZERO&nbsp;&nbsp; ></a>
+      </section>
+      <!-- section license -->
+      <section class="license">
+        <img class="license__img" src="./images/bg_business.8752c5a0.png" />
+        <h3 class="license__text">
+          알툴즈 기업용, 알약 기업용 제품의 <br />
+          라이선스를 확인하세요.
+        </h3>
+        <a class="license__button" href="#"
+          >비지니스 구매 자세히 보기&nbsp;&nbsp; ></a
+        >
+      </section>
+      <!-- section altools-list -->
+      <section class="altools-list">
+        <h3 class="list__title">빠르고 간편한 전국민 PC 필수품, 알툴즈</h3>
+        <div class="list__container">
+          <div class="list__items">
+            <img class="items__img" src="./images/img_알통합팩.png" />
+            <div class="items__description">
+              <div class="items__description__header">
+                <img
+                  class="item__description__img"
+                  src="./images/icon_통합팩.png"
+                />
+                <h4 class="item__description__title">알툴즈 통합팩</h4>
+              </div>
+              <p class="items__description__text">
+                내 PC 사용을 좀 더 간편하고 편리하게! <br />
+                알툴즈 통합팩 한번의 설치로 내 PC에 필요한 모든 것이 준비됩니다.
+              </p>
+              <a class="items__description__button">자세히 보기 ></a>
+            </div>
+          </div>
+          <div class="list__items">
+            <img class="items__img" src="./images/img_알집.png" />
+            <div class="items__description">
+              <div class="items__description__header">
+                <img
+                  class="item__description__img"
+                  src="./images/icon_알집.png"
+                />
+                <h4 class="item__description__title">알집</h4>
+              </div>
+              <p class="items__description__text">
+                다양한 압축파일 포맷 지원으로 파일 압축하기와 압축풀기에 뛰어난
+                무료 압축 프로그램입니다.
+              </p>
+              <a class="items__description__button">자세히 보기 ></a>
+            </div>
+          </div>
+          <div class="list__items">
+            <img class="items__img" src="./images/img_알약.png" />
+            <div class="items__description">
+              <div class="items__description__header">
+                <img
+                  class="item__description__img"
+                  src="./images/icon_알약.png"
+                />
+                <h4 class="item__description__title">알약</h4>
+              </div>
+              <p class="items__description__text">
+                전국민 백신 프로그램 알약! <br />
+                똑똑한 백신 프로그램 알약으로 바이러스, 악성코드를 검사하고
+                제거해보세요.
+              </p>
+              <a class="items__description__button">자세히 보기 ></a>
+            </div>
+          </div>
+          <div class="list__items">
+            <img class="items__img" src="./images/img_알씨.png" />
+            <div class="items__description">
+              <div class="items__description__header">
+                <img
+                  class="item__description__img"
+                  src="./images/icon_알씨.png"
+                />
+                <h4 class="item__description__title">알씨</h4>
+              </div>
+              <p class="items__description__text">
+                알씨는 사진 편집부터 동영상 만들기, 사진 포맷 변환, 자동회전,
+                일괄편집, 사진 꾸미기 등 편리한 기능을 제공하는 이미지 뷰어
+                프로그램입니다.
+              </p>
+              <a class="items__description__button">자세히 보기 ></a>
+            </div>
+          </div>
+          <div class="list__items">
+            <img class="items__img" src="./images/img_알캡쳐.png" />
+            <div class="items__description">
+              <div class="items__description__header">
+                <img
+                  class="item__description__img"
+                  src="./images/icon_알캡쳐.png"
+                />
+                <h4 class="item__description__title">알캡쳐</h4>
+              </div>
+              <p class="items__description__text">
+                모니터 화면 안의 무엇이든 원하는 순간에 보이는 그대로 캡쳐해주는
+                화면 캡쳐 프로그램입니다.
+              </p>
+              <a class="items__description__button">자세히 보기 ></a>
+            </div>
+          </div>
+          <div class="list__items">
+            <img class="items__img" src="./images/img_알PDF.png" />
+            <div class="items__description">
+              <div class="items__description__header">
+                <img
+                  class="item__description__img"
+                  src="./images/icon_알PDF.png"
+                />
+                <h4 class="item__description__title">알PDF</h4>
+              </div>
+              <p class="items__description__text">
+                알PDF 뷰어는 PDF를 다양한 포맷으로 변환할 수 있고, PDF합치기,
+                PDF 용량 줄이기, 수정 등 PDF를 자유롭게 편집할 수 있는 PDF
+                변환/편집 프로그램입니다.
+              </p>
+              <a class="items__description__button">자세히 보기 ></a>
+            </div>
+          </div>
+          <div class="list__items">
+            <img class="items__img" src="./images/img_알송.png" />
+            <div class="items__description">
+              <div class="items__description__header">
+                <img
+                  class="item__description__img"
+                  src="./images/icon_알송.png"
+                />
+                <h4 class="item__description__title">알송</h4>
+              </div>
+              <p class="items__description__text">
+                음악과 가사를 동시에 즐길 수 있는 알송은 실시간 싱크가사,
+                어학기능을 제공하는 음악 플레이어입니다.
+              </p>
+              <a class="items__description__button">자세히 보기 ></a>
+            </div>
+          </div>
+          <div class="list__items">
+            <img class="items__img" src="./images/img_알드라이브.png" />
+            <div class="items__description">
+              <div class="items__description__header">
+                <img
+                  class="item__description__img"
+                  src="./images/icon_알드라이브.png"
+                />
+                <h4 class="item__description__title">알드라이브</h4>
+              </div>
+              <p class="items__description__text">
+                클라이언트와 서버 간의 파일 송수신 기능 외에, WebDAV 등 다양한
+                프로토콜 파일 전송을 지원합니다.
+              </p>
+              <a class="items__description__button">자세히 보기 ></a>
+            </div>
+          </div>
+        </div>
+      </section>
+      <!-- section slide -->
+      <section class="slide">
+        <a href="https://altools.co.kr/adzero/intro">
+          <img class="slide__img" src="./images/banner_main_1.png" />
+          <button class="slide__left">
+            <img class="slide__left__img" src="/images/왼쪽 화살표.png" />
+          </button>
+          <button class="slide__right">
+            <img class="slide__right__img" src="./images/오른쪽 화살표.png" />
+          </button>
+          <p class="slide__num">
+            1 / 3
+          </p>
+        </a>
+      </section>
+      <!-- section grid -->
+      <section class="grid">
+        <h3 class="grid__title">더욱 다양하고 쾌적하게 활용하는 꿀팁</h3>
+        <div class="grid__container">
+          <div class="grid__items first">
+            <a
+              href="https://altools.co.kr/adzero/intro"
+              class="grid__item"
+              target="_blank"
+            >
+              <img
+                class="grid__item__img first"
+                src="./images/bg_gridBox_1.81b08ab0.png"
+              />
+              <div class="grid__item__box first">
+                <h4 class="item__box__title first">
+                  광고없이, <br />
+                  제휴 설치 없이.
+                </h4>
+                <p class="item__box__text first">
+                  쾌적한 PC 환경을 제공하는 <br />
+                  광고없는 알툴즈 AD-ZERO
+                </p>
+              </div>
+              <i class="fa-solid fa-arrow-right" style="color: #fff"></i>
+            </a>
+          </div>
+          <div class="grid__items">
+            <a
+              href="https://blog.naver.com/estpublic/222448734832"
+              class="grid__item"
+              target="_blank"
+            >
+              <img
+                class="grid__item__img"
+                src="./images/bg_gridBox_2.pdf.png"
+              />
+              <div class="grid__item__box">
+                <h4 class="item__box__title">알PDF, 인쇄도 더 다양하게</h4>
+                <p class="item__box__text">알PDF 문서 인쇄하는 방법</p>
+              </div>
+              <i class="fa-solid fa-arrow-right" style="color: #fff"></i>
+            </a>
+          </div>
+          <div class="grid__items">
+            <a
+              href="https://blog.naver.com/estpublic/222509061222"
+              class="grid__item"
+              target="_blank"
+            >
+              <img
+                class="grid__item__img"
+                src="./images/bg_gridBox_3.91b1293b.png"
+              />
+              <div class="grid__item__box">
+                <h4 class="item__box__title">알캡쳐, 스크롤 캡쳐 활용</h4>
+                <p class="item__box__text">
+                  웹사이트 페이지 전체를 <br />
+                  한 번에 캡쳐하고 싶어요.
+                </p>
+              </div>
+              <i class="fa-solid fa-arrow-right" style="color: #fff"></i>
+            </a>
+          </div>
+          <div class="grid__items">
+            <a
+              href="https://blog.naver.com/estpublic/222160800027"
+              class="grid__item"
+              target="_blank"
+            >
+              <img
+                class="grid__item__img"
+                src="./images/bg_gridBox_4.파일명.png"
+              />
+              <div class="grid__item__box">
+                <h4 class="item__box__title">알집, 압축파일 이름이 깨질 때</h4>
+                <p class="item__box__text">
+                  알집 모바일 유니코드 설정으로 <br />
+                  깨짐없이 압축 해제하는 방법
+                </p>
+              </div>
+              <i class="fa-solid fa-arrow-right" style="color: #fff"></i>
+            </a>
+          </div>
+          <div class="grid__items">
+            <a
+              href="https://blog.naver.com/estpublic/222348990244"
+              class="grid__item"
+              target="_blank"
+            >
+              <img
+                class="grid__item__img"
+                src="./images/bg_gridBox_5.알씨.png"
+              />
+              <div class="grid__item__box">
+                <h4 class="item__box__title">알씨, 급할 때는 집에서!</h4>
+                <p class="item__box__text">
+                  알씨를 활용하여 <br />
+                  셀프로 증명사진 만들기
+                </p>
+              </div>
+              <i class="fa-solid fa-arrow-right" style="color: #fff"></i>
+            </a>
+          </div>
+        </div>
+      </section>
+      <!-- section etc -->
+      <section class="etc">
+        <div class="etc__background">
+          <div class="etc__container">
+            <a href="https://blog.naver.com/estpublic">
+              <div class="etc__grid">
+                <img src="./images/icon_blog.d455c7a6.png" class="etc__icon" />
+                <div class="etc__box">
+                  <p class="etc__title">더 많은 알툴즈 꿀팁은</p>
+                  <strong class="etc__text">알툴즈 블로그 바로가기 ></strong>
+                </div>
+              </div>
+            </a>
+            <a href="https://www.estsoft.ai/">
+              <div class="etc__grid">
+                <img
+                  src="./images/icon_estsoft.1d5ce93a.png"
+                  class="etc__icon"
+                />
+                <div class="etc__box">
+                  <p class="etc__title">가장 빠른 인공지능 소식은</p>
+                  <strong class="etc__text">이스트 소프트 바로가기 ></strong>
+                </div>
+              </div>
+            </a>
+            <a href="https://www.estsecurity.com/">
+              <div class="etc__grid">
+                <img
+                  src="./images/icon_estsecurity.9280af33.png"
+                  class="etc__icon"
+                />
+                <div class="etc__box">
+                  <p class="etc__title">최신 보안 소식은</p>
+                  <strong class="etc__text">이스트시큐리티 바로가기 ></strong>
+                </div>
+              </div>
+            </a>
+          </div>
+        </div>
+      </section>
+    </main>
+    <!-- Footer -->
+    <footer class="footer">
+      <div class="footer__list">
+        <ul class="footer__ul">
+          <li class="footer__li">
+            <a href="https://www.estsoft.ai/company/introduce/">회사소개</a>
+          </li>
+          <li class="footer__li">
+            <a
+              href="https://xdn.altools.co.kr/altoolshp/terms/terms-of-service/docs/230628.html"
+              >이용약관</a
+            >
+          </li>
+          <li class="footer__li color">
+            <a
+              href="https://xdn.altools.co.kr/altoolshp/terms/privacy-policy/docs/230628.html"
+            >
+              개인정보처리방침
+            </a>
+          </li>
+          <li class="footer__li">
+            <a
+              href="https://xdn.altools.co.kr/altoolshp/terms/eula/docs/230220.html"
+            >
+              소프트웨어 사용권 계약서
+            </a>
+          </li>
+          <li class="footer__li">
+            <a href="https://altools.co.kr/service/contact?code=QA05">
+              제휴문의
+            </a>
+          </li>
+          <li class="footer__li">
+            <a href="https://altools.co.kr/event"> 이벤트 </a>
+          </li>
+        </ul>
+        <button class="footer__button">Family Site +</button>
+      </div>
+      <div class="footer__icons">
+        <a
+          href="https://www.estsoft.ai/"
+          class="footer__icons__link"
+          target="_blank"
+        >
+          <img
+            class="footer__icons__logo"
+            src="./images/spr_logo_estsoft.722c4838.png"
+          />
+        </a>
+        <ul class="footer__icons__list">
+          <li>
+            <a href="https://www.estsoft.ai/" target="_blank">
+              <img class="sns__icon" src="./images/sns_home.png" />
+            </a>
+          </li>
+          <li class="sns__icon">
+            <a href="https://www.facebook.com/estsoftfb/" target="_blank">
+              <img class="sns__icon" src="./images/sns_facebook.png" />
+            </a>
+          </li>
+          <li class="sns__icon">
+            <a href="" target="_blank">
+              <img class="sns__icon" src="./images/sns_message.png" />
+            </a>
+          </li>
+        </ul>
+      </div>
+      <p class="footer__address">
+        (주)이스트소프트 서울시 서초구 반포대로 3 이스트빌딩 (우)06711
+      </p>
+      <p class="footer__info">
+        대표이사: 정상원&nbsp;&nbsp;사업자등록번호: 229-81-03214&nbsp;&nbsp;
+        통신판매업신고번호: 2011-서울서초-1962&nbsp;&nbsp; TEL.
+        1544-8209&nbsp;&nbsp; FAX. 02-882-1155&nbsp;&nbsp; E-mail.
+        <span>altolls@estsoft.com</span>
+      </p>
+    </footer>
+  </body>
+</html>
diff --git a/main.js b/main.js
new file mode 100644
index 00000000..35e52112
--- /dev/null
+++ b/main.js
@@ -0,0 +1,12 @@
+"use strict";
+
+// header가 페이지 아래로 스크롤시 투명해짐
+const header = document.querySelector(".header");
+const headerHeight = header.offsetHeight;
+document.addEventListener("scroll", () => {
+  if (window.scrollY > headerHeight) {
+    header.classList.add("scroll");
+  } else {
+    header.classList.remove("scroll");
+  }
+});
diff --git a/styles/style.css b/styles/style.css
new file mode 100644
index 00000000..547bfdce
--- /dev/null
+++ b/styles/style.css
@@ -0,0 +1,848 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: "Pretendard-Regular";
+  color: rgb(26, 26, 26);
+  margin: 0;
+}
+
+h1,
+h2,
+h3,
+p,
+ul {
+  margin: 0;
+}
+
+ul {
+  list-style: none;
+  padding: 0;
+}
+
+a {
+  text-decoration: none;
+  color: var(--color-text);
+}
+
+button {
+  background-color: transparent;
+  outline: 0;
+  border: 0;
+  cursor: pointer;
+}
+
+button:focus {
+  outline: 1px solid transparent;
+}
+
+/* Header */
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 80px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 999;
+  background-color: white;
+  padding: 0 70px;
+}
+
+.scroll {
+  background-color: hsla(0, 0%, 100%, 0.85);
+  border-bottom-color: #8b95a1;
+}
+
+.header__logo {
+  font-family: "GongGothicMedium";
+  font-size: 24px;
+}
+
+.header__menu {
+  display: flex;
+  justify-content: space-between;
+  font-weight: bold;
+  width: 600px;
+}
+
+.header__menu__item {
+  font-size: 16px;
+  padding: 12px 16px;
+  transition: all 0.2s ease;
+  position: relative;
+}
+
+.header__menu__item:hover {
+  cursor: pointer;
+  background-color: rgba(139, 149, 161, 0.1);
+  border-radius: 4px;
+}
+
+.header__menu__item.menu1:hover .hover__menu1 {
+  display: inline-block;
+}
+
+.hover__menu1 {
+  display: none;
+  position: absolute;
+  left: 0;
+  top: 100%;
+  gap: 70px;
+  width: 800px;
+  height: 480px;
+  padding: 24px 20px 20px 20px;
+  background-color: hsla(0, 0%, 100%, 0.98);
+  border-radius: 6px;
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0.25), 0 8px 20px rgba(0, 0, 0, 0.15);
+}
+
+.hover__menu1__container {
+  display: flex;
+  justify-content: space-around;
+  align-items: flex-start;
+  width: 760px;
+  height: 366px;
+  padding-bottom: 24px;
+}
+
+.menu1__title {
+  margin-bottom: 12px;
+  padding-left: 8px;
+  font-size: 12px;
+  color: #8b95a1;
+}
+
+.menu1__title.security {
+  margin: 48px 0 8px 0;
+  padding-left: 8px;
+}
+
+.hover__tool__item {
+  display: flex;
+  align-items: center;
+  margin-top: 8px;
+  padding: 8px;
+  transition: background-color 0.2s ease;
+}
+
+.hover__tool__item:hover {
+  background-color: rgba(139, 149, 161, 0.1);
+  border-radius: 4px;
+}
+
+.tool__item__img {
+  width: 40px;
+  height: 40px;
+}
+
+.tool__item__box {
+  padding-left: 10px;
+}
+
+.tool__item__title {
+  font-size: 14px;
+  padding-bottom: 8px;
+}
+
+.tool__item__text {
+  font-size: 12px;
+  color: #8b95a1;
+}
+
+.altools__bg {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  background: linear-gradient(90deg, #ff6746, #ff477e);
+  border-radius: 10px;
+  padding: 15px;
+  width: 760px;
+  height: 70px;
+  /* margin-bottom: 50px; */
+}
+
+.altools__img {
+  width: 200px;
+  height: 30px;
+}
+
+.altools__box {
+  display: flex;
+  align-items: center;
+}
+
+.altools__text {
+  font-size: 12px;
+  font-weight: 400;
+  color: white;
+}
+
+.altools__title {
+  font-size: 17px;
+  color: white;
+  padding-left: 20px;
+}
+
+.header__menu__item.menu2 {
+  position: relative;
+}
+
+.hover__menu2 {
+  display: none;
+  position: absolute;
+  left: 0;
+  top: 100%;
+  width: 120px;
+  height: 130px;
+  padding: 14px 12px;
+  background-color: white;
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0.25), 0 8px 20px rgba(0, 0, 0, 0.15);
+  border-radius: 6px;
+}
+
+.hover__menu2__item {
+  padding: 10px 8px;
+  text-align: start;
+  font-size: 14px;
+  font-weight: 400;
+  color: #484848;
+  transition: all 0.2s ease;
+}
+
+.hover__menu2__item:hover {
+  background-color: rgba(139, 149, 161, 0.1);
+  border-radius: 4px;
+}
+
+.header__menu__item.menu2:hover .hover__menu2 {
+  display: block;
+}
+
+.header__button {
+  color: white;
+  background-color: rgb(26, 26, 26);
+  border-radius: 8px;
+  padding: 13px 20px;
+  font-weight: bold;
+  transition: background-color 0.3s ease;
+}
+
+.header__button:hover {
+  background-color: #484848;
+  cursor: pointer;
+}
+
+.down {
+  font-size: 10px;
+}
+
+/* Main */
+.main {
+  padding-top: 80px;
+}
+
+/* Home */
+.home {
+  margin: 0 40px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.home__img {
+  width: 100%;
+  height: 680px;
+  border-radius: 30px;
+  object-fit: cover;
+  position: relative;
+}
+
+.home__img__box {
+  position: absolute;
+  top: 30%;
+  left: 10%;
+  height: 100%;
+}
+
+.home__img__box__title {
+  font-size: 48px;
+}
+
+.home__img__box__text {
+  font-size: 16px;
+  margin: 20px 0 60px 0;
+}
+
+.home__img__box__link {
+  background-color: white;
+  width: 232px;
+  height: 66px;
+  font-size: 20px;
+  font-weight: bold;
+  padding: 20px 36px;
+  border-radius: 8px;
+  transition: all 0.3s ease;
+}
+
+.home__img__box__link:hover {
+  background-color: hsla(0, 0%, 100%, 0.85);
+}
+
+.home__slide__button {
+  display: flex;
+  align-items: center;
+  position: absolute;
+  bottom: 40%;
+}
+
+.home__slide__left {
+  margin-right: 30px;
+}
+
+.home__slide__num {
+  padding: 0 8px;
+  margin-right: 10px;
+}
+
+.home__slide__right {
+  margin-left: 30px;
+}
+
+.home__card {
+  display: flex;
+  height: 180px;
+  padding: 36px 0;
+}
+
+.home__card__item {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.08), 4px 12px 36px rgba(0, 0, 0, 0.09);
+  border-radius: 16px;
+  padding: 10px;
+  margin: 0px 15px;
+  width: 170px;
+}
+
+.card__item__img {
+  width: 44px;
+  height: 44px;
+}
+
+.card__item {
+  display: flex;
+  flex-direction: column;
+  margin: 10px 0;
+}
+
+.card__item__title {
+  font-size: 15px;
+  font-weight: bold;
+}
+
+.card__item__description {
+  font-size: 12px;
+  color: #8b95a1;
+}
+
+/* AD-ZERO */
+.AD-ZERO {
+  margin: 0 40px;
+
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.AD-ZERO__img {
+  width: 100%;
+  height: 680px;
+  border-radius: 30px;
+  object-fit: cover;
+}
+
+.AD-ZERO__text {
+  font-size: 40px;
+  font-weight: bold;
+  text-align: center;
+  position: absolute;
+  top: 40%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.AD-ZERO__button {
+  width: 230px;
+  height: 75px;
+  font-size: 20px;
+  font-weight: bold;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: white;
+  background-color: #1a1a1a;
+  padding: 0px 30px;
+  border-radius: 8px;
+  position: absolute;
+  top: 60%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  transition: background-color 0.3s ease;
+}
+
+.AD-ZERO__button:hover {
+  background-color: rgb(72, 72, 72);
+  cursor: pointer;
+}
+
+/* License */
+.license {
+  margin: 0 40px;
+
+  display: flex;
+  flex-direction: column;
+  margin-top: 28px;
+  position: relative;
+}
+
+.license__img {
+  width: 100%;
+  height: 680px;
+  border-radius: 30px;
+  object-fit: cover;
+}
+
+.license__text {
+  font-size: 40px;
+  color: white;
+  text-align: center;
+  position: absolute;
+  top: 45%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.license__button {
+  width: 300px;
+  height: 75px;
+  font-size: 20px;
+  font-weight: bold;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #1a1a1a;
+  background-color: white;
+  padding: 0px 30px;
+  border-radius: 8px;
+  position: absolute;
+  top: 65%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  transition: background-color 0.3s ease;
+}
+
+.license__button:hover {
+  background-color: rgba(255, 255, 255, 0.85);
+}
+
+/* Altools-list */
+.altools-list {
+  margin: 0 40px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 28px;
+  padding: 120px 0px;
+}
+
+.list__title {
+  font-size: 36px;
+  margin-bottom: 80px;
+}
+
+.list__container {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+  gap: 60px 40px;
+}
+
+.list__items {
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.08), 4px 12px 36px rgba(0, 0, 0, 0.09);
+  overflow: hidden;
+  border-radius: 10px;
+  transition: all 0.3s ease;
+}
+
+.list__items:hover {
+  cursor: pointer;
+  transform: translateY(-15px);
+}
+
+.items__img {
+  width: 265px;
+  height: 100px;
+}
+
+.items__description {
+  width: 265px;
+  height: 240px;
+  padding: 20px 20px 24px;
+  position: relative;
+  border-radius: 50px;
+}
+
+.items__description__header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.item__description__img {
+  width: 44px;
+  height: 44px;
+}
+
+.item__description__title {
+  font-size: 20px;
+  margin-left: 10px;
+}
+
+.items__description__text {
+  font-size: 14px;
+}
+
+.items__description__button {
+  font-size: 13px;
+  color: #0088ff;
+  position: absolute;
+  bottom: 15px;
+  right: 15px;
+}
+
+/* Slide */
+.slide {
+  margin: 0 40px;
+  margin-top: 28px;
+  position: relative;
+}
+
+.slide__img {
+  width: 100%;
+  height: 400px;
+  border-radius: 30px;
+  object-fit: cover;
+}
+
+.slide__left {
+  width: 50px;
+  height: 50px;
+  background-color: hsla(0, 0%, 100%, 0.9);
+  border-radius: 50%;
+  padding: 10px;
+  position: absolute;
+  top: 50%;
+  left: 4%;
+  transform: translate(-50%, -50%);
+  transition: background-color 0.2s ease;
+}
+
+.slide__left__img {
+  width: 30px;
+  height: 30px;
+}
+
+.slide__right {
+  width: 50px;
+  height: 50px;
+  background-color: hsla(0, 0%, 100%, 0.9);
+  border-radius: 50%;
+  padding: 10px;
+  position: absolute;
+  top: 50%;
+  right: 1%;
+  transform: translate(-50%, -50%);
+  transition: background-color 0.2s ease;
+}
+
+.slide__left:hover,
+.slide__right:hover {
+  background-color: white;
+}
+
+.slide__right__img {
+  width: 30px;
+  height: 30px;
+}
+
+.slide__num {
+  position: absolute;
+  bottom: 18%;
+  left: 18%;
+  font-size: 15px;
+  background-color: #0000001a;
+  color: white;
+  border-radius: 100px;
+  padding: 8px 10px;
+}
+
+.slide__num:hover {
+  cursor: auto;
+}
+
+/* Grid */
+.grid {
+  margin: 0 40px;
+  margin-top: 28px;
+  padding: 120px 0;
+}
+
+.grid__title {
+  font-size: 36px;
+  color: #1a1a1a;
+  text-align: center;
+}
+
+.grid__container {
+  margin-top: 80px;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+  gap: 30px;
+}
+
+.grid__items.first {
+  grid-row: 1/3;
+}
+
+.grid__items {
+  position: relative;
+  transition: all 0.3s ease;
+}
+
+.grid__items:hover {
+  transform: translateY(-15px);
+}
+
+.grid__item__img.first {
+  height: 100%;
+  border-radius: 20px;
+}
+
+.grid__item__img {
+  width: 500px;
+  height: 400px;
+  border-radius: 20px;
+}
+
+.grid__item__box.first {
+  padding: 80px 60px;
+}
+
+.grid__item__box {
+  position: absolute;
+  left: 0%;
+  top: 5%;
+  padding: 36px;
+}
+
+.item__box__title.first {
+  font-size: 32px;
+}
+
+.item__box__title {
+  font-size: 20px;
+}
+
+.item__box__text.first {
+  font-size: 16px;
+  padding-top: 24px;
+}
+
+.item__box__text {
+  font-size: 15px;
+  padding-top: 12px;
+}
+
+.fa-solid.fa-arrow-right {
+  position: absolute;
+  top: 5%;
+  right: 10%;
+  background-color: #1a1a1a;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  text-align: center;
+  line-height: 40px;
+  font-size: 23px;
+  transition: all 0.3s ease;
+}
+
+.grid__items:hover .fa-solid.fa-arrow-right {
+  transform: translateX(10px);
+}
+
+/* Etc */
+.etc {
+  margin: 28px 0px 0px 0px;
+  margin-top: 28px;
+}
+
+.etc__background {
+  width: 100%;
+  height: 340px;
+  margin: 0;
+  background-image: url(/images/bg_news.png);
+  background-size: cover;
+  position: relative;
+}
+
+.etc__container {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: 1fr;
+  gap: 50px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.etc__grid {
+  width: 350px;
+  height: 140px;
+  padding: 0 40px 0 52px;
+  border-radius: 15px;
+  background-color: white;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  transition: all 0.3s ease;
+}
+
+.etc__grid:hover {
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.08), 4px 12px 36px rgba(0, 0, 0, 0.09);
+}
+
+.etc__icon {
+  width: 40px;
+  height: 40px;
+}
+
+.etc__title {
+  font-size: 16px;
+  color: #4e5968;
+  margin-bottom: 10px;
+}
+
+.etc__text {
+  font-size: 16px;
+  color: #1a1a1a;
+}
+
+/* Footer */
+.footer {
+  padding: 40px;
+}
+
+.footer__list {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.footer__ul {
+  display: flex;
+  gap: 40px;
+}
+
+.footer__li {
+  font-size: 13px;
+  font-weight: bold;
+  color: #8b95a1;
+  padding: 10px 10px 9px;
+  transition: all 0.2s ease;
+}
+
+.footer__li.color {
+  color: #4e5968;
+}
+
+.footer__button {
+  padding: 8px 10px;
+  font-size: 13px;
+  font-weight: bold;
+  color: #8b95a1;
+  transition: all 0.2s ease;
+}
+
+.footer__li:hover,
+.footer__button:hover {
+  background-color: rgba(139, 149, 161, 0.1);
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.footer__icons {
+  display: flex;
+  align-items: center;
+  margin-top: 32px;
+  padding: 10px 10px 9px;
+}
+
+.footer__icons__link {
+  margin-right: 50px;
+}
+
+.footer__icons__logo {
+  width: 64px;
+  height: 18px;
+}
+
+.footer__icons__list {
+  display: flex;
+  flex-direction: row;
+  gap: 40px;
+}
+
+.sns__icon {
+  width: 20px;
+  height: 20px;
+}
+
+.footer__address {
+  padding: 10px 10px 9px;
+  font-size: 14px;
+  color: #8b95a1;
+}
+
+.footer__info {
+  padding: 0px 10px;
+  font-size: 14px;
+  color: #8b95a1;
+}
+
+.footer__info span {
+  color: #0088ff;
+}
+
+@font-face {
+  font-family: "Pretendard-Regular";
+  src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff")
+    format("woff");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "GongGothicMedium";
+  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicMedium.woff")
+    format("woff");
+  font-weight: 500;
+  font-style: normal;
+}