diff --git a/README.md b/README.md
index cc6a3b23..8c48f975 100644
--- a/README.md
+++ b/README.md
@@ -1,45 +1,71 @@
-[참고 내용]
+<p></p>
 
-👀 자신이 원하는 사이트 레이아웃 클론
-원하는 사이트(페이지)를 자유롭게 선택하고 레이아웃을 클론 코딩하세요.
-평소에 도전해 보고 싶었거나 혹은 자신의 수준에 맞는 사이트(페이지)를 선택하세요.
-과제 수행 및 리뷰 기간은 별도 공지를 참고하세요!
+# ☕️ 폴바셋(Paul Bassett) 홈페이지 클론 코딩
 
-과제 수행 및 제출 방법
+카페 프랜차이즈 '폴바셋(Paul Bassett)' 공식 홈페이지를 클론 코딩한 개인 프로젝트입니다.
+  
 
-1. 현재 저장소를 로컬에 클론(Clone)합니다.
-2. 자신의 본명으로 브랜치를 생성합니다.(구분 가능하도록 본명을 꼭 파스칼케이스로 표시하세요, git branch KDT0_이름)
-3. 자신의 본명 브랜치에서 과제를 수행합니다.
-4. 과제 수행이 완료되면, 자신의 본명 브랜치를 원격 저장소에 푸시(Push)합니다.(main 브랜치에 푸시하지 않도록 꼭 주의하세요, git push origin KDT0_이름)
-5. 저장소에서 main 브랜치를 대상으로 Pull Request 생성하면, 과제 제출이 완료됩니다!(E.g, main <== KDT0_이름)
+## 🖱 프로젝트 관련 사이트 주소
 
+<p align="center">
 
-- main 혹은 다른 사람의 브랜치로 절대 병합하지 않도록 주의하세요!
-- Pull Request에서 보이는 설명을 다른 사람들이 이해하기 쉽도록 꼼꼼하게 작성하세요!
-- Pull Request에서 과제 제출 후 절대 병합(Merge)하지 않도록 주의하세요!
-- 과제 수행 및 제출 과정에서 문제가 발생한 경우, 바로 담당 멘토나 강사에서 얘기하세요!
+* 원 사이트 주소 : https://www.baristapaulbassett.co.kr/Index.pb
+* **클론 코딩 사이트 주소** : https://superlative-puppy-9a8f2a.netlify.app/
 
-필수 요구사항
+</p>
 
-- 과제에 대한 설명을 포함한 README.md 파일을 제공하세요!
-- 과제 결과와 비교할 수 있는 실제 사이트(페이지)의 주소를 명시하세요!
-- 과정에서 사용한 프로젝트 폴더/파일이 모두 포함돼야 합니다, 일부 파일만 제출하지 마세요!
-- 실제 서비스로 배포하고 접근 가능한 링크를 추가해야 합니다.
+## 📑 프로젝트 간략 설명 및 주제 선정 이유
 
-선택 요구사항
+평소 커피를 즐겨 마셔서 카페 프랜차이즈 중 한 곳의 사이트를 직접 구현해보고 싶었고, 그 중 폴바셋 웹사이트가 시각적으로 굉장히 인상 깊게 다가왔습니다. 하지만 폴바셋 메인 페이지의 대부분이 반응형으로 제작되어 있어, 제가 현재 사용 가능한 수준인 `HTML`과 `CSS`, 그리고 약간의 `JavaScript` 를 최대한 활용하여 클론 코딩을 진행하고자 하였습니다.
 
-- < header >, < section > 등 시멘틱 태그를 최대한 활용해보세요.
-- 실제 사이트의 레거시 코드 활용보단 최신의 CSS Flex 혹은 Grid 등을 활용해보세요.
-- 부분적으로 BEM 방법론을 도입해보세요.
-- JS가 필요한 부분은 되도록 생략하되 이유를 명시해보세요.(CSS로 대체 가능한지 피드백이 있을 수 있겠죠?!)
-- JS가 필요한 부분 중 구현할 부분이 있다면 자유롭게 구현해보세요.(JS 과제가 아니니까 가볍게 구현하시길 추천해요)
+## 💡 프로젝트 수행 목표
 
-손쉬운 이미지 추출 방법
+### 1. HTML
 
-사이트 클론에 필요한 이미지를 좀 더 쉽게 추출하기 위해서 Chrome 확장 프로그램인 Image Downloader를 사용하세요.
+```js
+- 사이트 레이아웃을 직접 구현하고, 실제로 각 영역에 맞는 <header>,<footer> 등 시멘틱 태그 활용하기
+- HTML 문서가 CSS 파일과 JavaScript 파일과 함께 어떻게 구현되는지 보기
+```
 
-1. 원하는 사이트 접속
-2. Image Downloader 확장 프로그램 실행
-3. 다운로드 원하는 이미지 선택
-4. 서브 폴더 이름(Save to subfolder) 명시
-5. 다운로드!
+### 2. CSS
+
+```js
+- 각 영역별 클래스 지정 및 부모 요소 & 자식 요소 간 적용 속성 이해하기
+- position 속성의 relation, absolute, z-index 등의 상관 관계 이해하기
+- margin, padding, justify-content 등 속성을 활용해 각 요소별 정렬 양상 확인하기
+- 특정 메뉴 영역 또는 이미지 hover 효과 적용시 필요한 코드 감 익히기
+```  
+
+## 📑 구현한 내용
+
+- Navbar 내부 로고 및 세부 메뉴 hover 효과 적용
+![navbar](https://github.com/KDT1-FE/Y_FE_HTML_CSS/assets/137375435/0fcfb900-413b-493b-a6f7-7387f91cb0a6)
+
+- Sidebar 이미지 hover 효과 및 툴팁 적용
+![sidebar](https://github.com/KDT1-FE/Y_FE_HTML_CSS/assets/137375435/07adefbd-d375-48bb-bfef-1c81ed5434f2)
+
+- 이벤트 배너 부분 hover 효과 적용
+![footer](https://github.com/KDT1-FE/Y_FE_HTML_CSS/assets/137375435/e85857f7-c9d3-42e8-86ec-07ab3f6bf7b5)
+
+
+## 🥈 아쉬운 점
+
+  > ### 1. CSS 속성에 대한 전반적인 이해도 부족
+
+`CSS`의 세부 속성들에 대한 이해와 실습 경험이 아직 부족하여, 제가 실제 구현하고자 했던 많은 기능들이 생략되거나 비교적 간단한 형태로만 구현하게 된 것이 아쉬웠습니다.
+  
+> ### 2. 각 부모 요소/자식 요소에 대한 속성 활용의 어려움
+페이지 레이아웃 내에서 특정 요소들을 추가/수정/삭제 할 때마다 전체적인 구조가 틀어지거나, 생각지 못했던 특정 부모 요소 / 자식 요소가 영향을 받아 매번 원인을 추적하는 데에 많은 시간을 할애할 수 밖에 없었던 점이 아쉬웠습니다. 
+  
+
+## 📢 앞으로 개선할 방향
+
+ 
+
+### 1. '실험'해본다는 생각으로 최대한 여러 가지 코드를 많이 써보고, 각 속성이 바뀔 때마다 실제 화면에 어떻게 출력되는지 자주 보고 익숙해지기
+
+
+### 2. 비슷한 부분에서 실수나 어려움이 계속 반복된다면, 그 부분에 대한 이해가 아직 많이 부족하다는 뜻이니 기본기부터 확실히 짚고 넘어가기
+  
+
+### 3. '내가 원하는 사이트를 최대한 비슷하게 만들어냈다'라는 것에 안주하기보다는, 계속 부지런히 나만의 아이디어로 새로운 웹사이트 만들어보기
\ No newline at end of file
diff --git a/images/.DS_Store b/images/.DS_Store
new file mode 100644
index 00000000..db62f5ea
Binary files /dev/null and b/images/.DS_Store differ
diff --git a/images/app.png b/images/app.png
new file mode 100644
index 00000000..e2a39032
Binary files /dev/null and b/images/app.png differ
diff --git a/images/app_h.png b/images/app_h.png
new file mode 100644
index 00000000..f1a43f14
Binary files /dev/null and b/images/app_h.png differ
diff --git a/images/bg1.jpg b/images/bg1.jpg
new file mode 100644
index 00000000..be585dce
Binary files /dev/null and b/images/bg1.jpg differ
diff --git a/images/bg2.jpg b/images/bg2.jpg
new file mode 100644
index 00000000..47f9e9aa
Binary files /dev/null and b/images/bg2.jpg differ
diff --git a/images/bg3.jpg b/images/bg3.jpg
new file mode 100644
index 00000000..6be7f2fa
Binary files /dev/null and b/images/bg3.jpg differ
diff --git a/images/bg4.jpg b/images/bg4.jpg
new file mode 100644
index 00000000..ee6164e8
Binary files /dev/null and b/images/bg4.jpg differ
diff --git a/images/bgb.png b/images/bgb.png
new file mode 100644
index 00000000..19cb4396
Binary files /dev/null and b/images/bgb.png differ
diff --git a/images/bgbg.png b/images/bgbg.png
new file mode 100644
index 00000000..47747af5
Binary files /dev/null and b/images/bgbg.png differ
diff --git a/images/coffeedist.png b/images/coffeedist.png
new file mode 100644
index 00000000..60f77368
Binary files /dev/null and b/images/coffeedist.png differ
diff --git a/images/event1.jpg b/images/event1.jpg
new file mode 100644
index 00000000..79d1f90f
Binary files /dev/null and b/images/event1.jpg differ
diff --git a/images/event2.jpg b/images/event2.jpg
new file mode 100644
index 00000000..4b409aef
Binary files /dev/null and b/images/event2.jpg differ
diff --git a/images/favicon.png b/images/favicon.png
new file mode 100644
index 00000000..c84b48c9
Binary files /dev/null and b/images/favicon.png differ
diff --git a/images/fb.png b/images/fb.png
new file mode 100644
index 00000000..a9c9d601
Binary files /dev/null and b/images/fb.png differ
diff --git a/images/fb_h.png b/images/fb_h.png
new file mode 100644
index 00000000..4971e5b2
Binary files /dev/null and b/images/fb_h.png differ
diff --git a/images/footer_b1.png b/images/footer_b1.png
new file mode 100644
index 00000000..7a792154
Binary files /dev/null and b/images/footer_b1.png differ
diff --git a/images/footer_b2.png b/images/footer_b2.png
new file mode 100644
index 00000000..497079fb
Binary files /dev/null and b/images/footer_b2.png differ
diff --git a/images/insta.png b/images/insta.png
new file mode 100644
index 00000000..5453cc1f
Binary files /dev/null and b/images/insta.png differ
diff --git a/images/insta_h.png b/images/insta_h.png
new file mode 100644
index 00000000..bcf79c61
Binary files /dev/null and b/images/insta_h.png differ
diff --git a/images/logo.png b/images/logo.png
new file mode 100644
index 00000000..b4051f27
Binary files /dev/null and b/images/logo.png differ
diff --git a/images/logo_h.png b/images/logo_h.png
new file mode 100644
index 00000000..cf9e0f95
Binary files /dev/null and b/images/logo_h.png differ
diff --git a/images/newsug.png b/images/newsug.png
new file mode 100644
index 00000000..999ca9ae
Binary files /dev/null and b/images/newsug.png differ
diff --git a/images/next.png b/images/next.png
new file mode 100644
index 00000000..9b154ab1
Binary files /dev/null and b/images/next.png differ
diff --git a/images/notice_btn.png b/images/notice_btn.png
new file mode 100644
index 00000000..0bfc0c33
Binary files /dev/null and b/images/notice_btn.png differ
diff --git a/images/prev.png b/images/prev.png
new file mode 100644
index 00000000..bc107ff9
Binary files /dev/null and b/images/prev.png differ
diff --git a/images/recom.png b/images/recom.png
new file mode 100644
index 00000000..445f0b49
Binary files /dev/null and b/images/recom.png differ
diff --git a/images/recom_h.png b/images/recom_h.png
new file mode 100644
index 00000000..b499022c
Binary files /dev/null and b/images/recom_h.png differ
diff --git a/images/store.png b/images/store.png
new file mode 100644
index 00000000..264df777
Binary files /dev/null and b/images/store.png differ
diff --git a/images/yt.png b/images/yt.png
new file mode 100644
index 00000000..41693579
Binary files /dev/null and b/images/yt.png differ
diff --git a/images/yt_h.png b/images/yt_h.png
new file mode 100644
index 00000000..fd1dff9f
Binary files /dev/null and b/images/yt_h.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..ae501371
--- /dev/null
+++ b/index.html
@@ -0,0 +1,314 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Paulbassett - 폴바셋</title>
+    <link
+      href="
+  https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css
+  "
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="/main.css" />
+    <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=Noto+Sans+KR:wght@300&family=Noto+Serif+KR:wght@500&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="/images/favicon.png"
+    />
+  </head>
+
+  <body>
+    <header class="header_wrap">
+      <div class="logo">
+        <a href="#"><img src="/images/logo.png" alt="Logo" id="logoImage" /></a>
+      </div>
+      <div class="menu_bar">
+        <nav>
+          <ul class="menu_center">
+            <li>
+              <span><a href="#">ABOUT US</a></span>
+              <ul class="inner">
+                <li><a href="#">Brand</a></li>
+                <li><a href="#">회사소개</a></li>
+                <li><a href="#">CSR</a></li>
+              </ul>
+            </li>
+            <li>
+              <span><a href="#">MENU</a></span>
+              <ul class="inner">
+                <li><a href="#">NEW</a></li>
+                <li><a href="#">COFFEE</a></li>
+                <li><a href="#">BEVERAGE</a></li>
+                <li><a href="#">ICE-CREAM</a></li>
+                <li><a href="#">FOOD</a></li>
+                <li><a href="#">PRODUCT</a></li>
+              </ul>
+            </li>
+            <li>
+              <span><a href="#">STORE</a></span>
+              <ul class="inner">
+                <li><a href="#">매장찾기</a></li>
+              </ul>
+            </li>
+            <li>
+              <span><a href="#">SOCIETY</a></span>
+              <ul class="inner">
+                <li><a href="#">Paul Bassett Society</a></li>
+                <li><a href="#">회원 등급 혜택</a></li>
+                <li><a href="#">e-Card 선물</a></li>
+                <li><a href="#">모바일 App 안내</a></li>
+                <li><a href="#">제휴혜택 안내</a></li>
+              </ul>
+            </li>
+            <li>
+              <span><a href="#">WHAT'S NEW</a></span>
+              <ul class="inner">
+                <li><a href="#">Event / News</a></li>
+                <li><a href="#">Notice</a></li>
+              </ul>
+            </li>
+            <li>
+              <span><a href="#">E-SHOP</a></span>
+              <ul class="inner">
+                <li><a href="#">E-SHOP 소개</a></li>
+              </ul>
+            </li>
+          </ul>
+        </nav>
+      </div>
+      <div class="menu_right">
+        <ul class="menu_right_top">
+          <li><a href="#">로그인</a></li>
+          <li><a href="#">회원가입</a></li>
+          <li><a href="#">문의하기</a></li>
+          <li><a href="#">채용</a></li>
+          <li><a href="#">고객센터</a></li>
+        </ul>
+        <ul class="menu_right_bottom">
+          <li>
+            <img src="/images/newsug.PNG" alt="신규입점제의" /><a href="#"
+              >신규입점제의</a
+            >
+          </li>
+          <li>
+            <img src="/images/coffeedist.PNG" alt="납품문의" /><a href="#"
+              >납품문의</a
+            >
+          </li>
+        </ul>
+      </div>
+    </header>
+
+    <section class="visual">
+      <div class="slideshow-container">
+        <div class="my-slides fade" id="slide01">
+          <div class="numbertext">01 / 04</div>
+          <img
+            src="/images/bg1.jpg"
+            alt="Summer Vibes 내 여름을 색다르게 폴 바셋 에이드&프라페"
+          />
+          <div class="txtArea">
+            <strong class>Summer Vibes</strong>
+            <span class="txt"
+              >내 여름을 색다르게<br />폴 바셋 에이드 & 프라페</span
+            >
+            <a
+              href="https://www.baristapaulbassett.co.kr/whatsNews/event/View.pb?eventSeq=2782"
+              class="btn"
+              >DETAIL VIEW</a
+            >
+          </div>
+        </div>
+
+        <div class="my-slides fade" id="slide02">
+          <div class="numbertext">02 / 04</div>
+          <img
+            src="/images/bg2.jpg"
+            alt="Freshly Made 자연의 신선함을 그대로, 토마토 & 고창수박주스"
+          />
+          <div class="txtArea">
+            <strong class>Freshly Made</strong>
+            <span class="txt"
+              >자연의 신선함을 그대로,<br />토마토 & 고창수박주스</span
+            >
+            <a
+              href="https://www.baristapaulbassett.co.kr/menu/new/View.pb?cid1=&seq=1824"
+              class="btn"
+              >DETAIL VIEW</a
+            >
+          </div>
+        </div>
+
+        <div class="my-slides fade" id="slide03">
+          <div class="numbertext">03 / 04</div>
+          <img
+            src="/images/bg3.jpg"
+            alt="Find your Summer Snow 입안 가득 번지는 시원한 여름 눈꽃"
+          />
+          <div class="txtArea">
+            <strong class>Find your <br />Summer Snow</strong>
+            <span class="txt">입안 가득 번지는 시원한 여름 눈꽃</span>
+            <a
+              href="https://www.baristapaulbassett.co.kr/menu/new/View.pb?cid1=&seq=1804"
+              class="btn"
+              >DETAIL VIEW</a
+            >
+          </div>
+        </div>
+
+        <div class="my-slides fade" id="slide04">
+          <div class="numbertext">04 / 04</div>
+          <img
+            src="/images/bg4.jpg"
+            alt="Sweet Corn Festival 달콤함을 가득 담은 초당옥수수 음료&아이스크림"
+          />
+          <div class="txtArea">
+            <strong class>Sweet Corn <br />Festival</strong>
+            <span class="txt"
+              >달콤함을 가득 담은 초당옥수수 음료 & 아이스크림</span
+            >
+            <a
+              href="https://www.baristapaulbassett.co.kr/menu/new/View.pb?cid1=&seq=1784"
+              class="btn"
+              >DETAIL VIEW</a
+            >
+          </div>
+        </div>
+
+        <div class="side_wrap">
+          <div class="sidebar">
+            <ul class="sides">
+              <li>
+                <a href="#"
+                  ><img
+                    src="/images/recom.png"
+                    data-hover-src="/images/recom_h.png"
+                    alt="추천메뉴"
+                  />
+                  <div class="tooltip"><span>추천메뉴</span></div></a
+                >
+              </li>
+              <li>
+                <a href="#"
+                  ><img
+                    src="/images/fb.PNG"
+                    data-hover-src="/images/fb_h.png"
+                    alt="페이스북"
+                  />
+                  <div class="tooltip"><span>페이스북</span></div></a
+                >
+              </li>
+              <li>
+                <a href="#"
+                  ><img
+                    src="/images/insta.PNG"
+                    data-hover-src="/images/insta_h.png"
+                    alt="인스타그램"
+                  />
+                  <div class="tooltip"><span>인스타그램</span></div></a
+                >
+              </li>
+              <li>
+                <a href="#"
+                  ><img
+                    src="/images/yt.png"
+                    data-hover-src="/images/yt_h.png"
+                    alt="유튜브"
+                  />
+                  <div class="tooltip"><span>유튜브</span></div></a
+                >
+              </li>
+              <li>
+                <a href="#"
+                  ><img
+                    src="/images/app.png"
+                    data-hover-src="/images/app_h.png"
+                    alt="폴바셋 앱"
+                  />
+                  <div class="tooltip"><span>폴바셋 앱</span></div></a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div style="position: relative">
+          <div class="find">
+            <a href="#"
+              ><img src="/images/store.png" alt="Find a store" />FIND A STORE</a
+            >
+          </div>
+        </div>
+        <!--NOTICE LINE-->
+        <div class="notice">
+          <div class="notice_center">
+            <div class="notice_swiper">
+              <div class="notice_pre">NOTICE</div>
+              <div class="change_outer">
+                <div class="change_inner">
+                  <div class="element">폴바셋 평택 소사 DT점 오픈 안내</div>
+                  <div class="element">폴바셋 대구 감삼 DT점 오픈 안내</div>
+                  <div class="element">폴바셋 경산 옥곡 DT점 오픈 안내</div>
+                  <div class="element">폴바셋 구미 봉곡 DT점 오픈 안내</div>
+                  <div class="element">폴바셋 연세와병원점 오픈 안내</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <footer class="footer_wrap">
+          <div class="events">
+            <div class="event1">
+              <a href="#"
+                ><h3>자동 충전 이벤트</h3>
+                <span>5만원 이상 자동충전시, 1+1 쿠폰 증정</span></a
+              >
+            </div>
+            <div class="event2">
+              <a href="#"
+                ><h3>Bean Info</h3>
+                <span>폴바셋 원두 정보를 알아보세요!</span></a
+              >
+            </div>
+          </div>
+          <div class="utils">
+            <div class="util_left">
+              <a href="#"><span>개인정보처리방침</span></a>
+              <a href="#"><span>신규입점안내</span></a>
+              <a href="#"><span>이용약관</span></a>
+              <a href="#"><span>위치정보 서비스 이용약관</span></a>
+              <a href="#"><span>소사이어티카드 이용약관</span></a>
+              <a href="#"><span>기프트카드 이용약관</span></a>
+              <a href="#"><span>고객센터</span></a>
+              <a href="#"><span>사이트맵</span></a>
+              <a href="#"><span>윤리 HOT-LINE</span></a>
+              <div class="biz">
+                엠즈씨드(주) 대표이사 : 김용철 주소 : 서울특별시 강남구 도산대로
+                75길 22 (청담동) <br />사업자등록번호 211-88-95935 대표번호
+                1899-8829 개인정보관리책임자 : 정보문 © 2019 m's seed Co., Ltd.
+                All rights reserved.
+              </div>
+            </div>
+            <div class="util_right">
+              <img src="/images/footer_b1.png" alt="" />
+              <img src="/images/footer_b2.png" alt="" />
+              <a href="#"><img src="/images/fb.png" alt="Facebook" /></a>
+              <a href="#"><img src="/images/insta.png" alt="Instagram" /></a>
+              <a href="#"><img src="/images/yt.png" alt="YouTube" /></a>
+            </div>
+
+            <script src="/main.js"></script>
+          </div>
+        </footer>
+      </div>
+    </section>
+  </body>
+</html>
diff --git a/main.css b/main.css
new file mode 100644
index 00000000..ad056af4
--- /dev/null
+++ b/main.css
@@ -0,0 +1,692 @@
+html div span a h3 {
+  font-family: "Noto Sans KR", sans-serif;
+}
+
+.my-slides {
+  display: none;
+  position: relative;
+}
+
+.my-slides img {
+  width: 100%;
+  height: 100vh;
+  object-fit: cover;
+}
+
+/* Slideshow container */
+.slideshow-container {
+  max-width: 100%;
+  margin-top: -110px;
+  z-index: 0;
+}
+
+/* Caption text */
+.txtArea {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  margin-top: -30%;
+  margin-left: 10%;
+}
+
+.txtArea strong {
+  font-weight: 700;
+  color: #fff;
+  font-size: 5em;
+  animation: 1.5s anim-lineUp ease-out;
+}
+
+.txtArea span {
+  font-size: 1em;
+  color: #fff;
+  margin-top: 30px;
+  line-height: 25px;
+  animation: 2s anim-lineUp ease-out;
+}
+
+.txtArea a {
+  color: #fff;
+  font-size: 1em;
+  font-weight: 700;
+  margin-top: 20px;
+  width: fit-content;
+  animation: 2s anim-lineUp ease-out;
+}
+
+.my-slides:nth-child(2) strong,
+.my-slides:nth-child(3) strong {
+  font-weight: 700;
+  color: #212121;
+  font-size: 5em;
+  animation: 1.5s anim-lineUp ease-out;
+}
+
+.my-slides:nth-child(2) span,
+.my-slides:nth-child(3) span {
+  font-size: 1em;
+  color: #212121;
+  margin-top: 30px;
+  line-height: 25px;
+  animation: 2s anim-lineUp ease-out;
+}
+
+.my-slides:nth-child(2) a,
+.my-slides:nth-child(3) a {
+  color: #212121;
+  font-size: 1em;
+  font-weight: 700;
+  margin-top: 20px;
+  animation: 2s anim-lineUp ease-out;
+}
+
+@keyframes anim-lineUp {
+  0% {
+    opacity: 0;
+    transform: translateX(-80%);
+  }
+
+  20% {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 1;
+    transform: translateX(0%);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateX(0%);
+  }
+}
+
+/* Number text (1/3 etc) */
+.numbertext {
+  position: absolute;
+  top: 50%;
+  right: 2%;
+  padding: 15px;
+  border-radius: 20px;
+  color: #fff;
+  background-color: rgba(92, 92, 92, 0.2);
+  font-size: 20px;
+  opacity: 0.8;
+}
+
+/* The dots/bullets/indicators */
+
+.active {
+  background-color: #ea094b;
+}
+
+/* Fading animation */
+.fade {
+  animation-name: fade;
+  animation-duration: 3s;
+}
+
+@keyframes fade {
+  from {
+    opacity: 0.5;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+/* On smaller screens, decrease text size */
+@media only screen and (max-width: 300px) {
+  .text {
+    font-size: 11px;
+  }
+}
+
+.header_wrap {
+  display: flex;
+  height: 110px;
+  top: 0;
+  background-color: rgba(0, 0, 0, 0.2);
+  position: relative;
+  z-index: 1;
+}
+
+.header_wrap nav {
+  width: 100%;
+}
+
+.header_wrap nav::after {
+  display: flex;
+  content: "";
+  width: 100%;
+  position: fixed;
+  top: 0px;
+  left: 0;
+  background-image: url("/images/bgbg.png");
+  background-repeat: repeat;
+  opacity: 0;
+  transition: ease-in-out 0.2s;
+  z-index: -1;
+  border-bottom: 1px solid #f0f0f0;
+  pointer-events: none;
+}
+
+.header_wrap nav:hover::after {
+  height: 280px;
+  opacity: 1;
+}
+
+.header_wrap .logo {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 2;
+}
+
+.header_wrap .logo a {
+  width: 130px;
+  height: 56px;
+  margin-left: 20px;
+  margin-right: 150px;
+}
+
+.header_wrap .menu_bar {
+  display: flex;
+  flex-direction: row;
+  width: 1200px;
+  z-index: 1;
+  padding-top: 60px;
+  padding-bottom: 60px;
+}
+
+.header_wrap .menu_bar nav ul li a:hover {
+  color: #ea094b;
+  transition: 0.2s;
+  opacity: 1;
+}
+
+.header_wrap .menu_bar .menu_center {
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  justify-content: space-between;
+}
+
+.header_wrap .menu_bar .menu_center li span a {
+  font-size: 14px;
+  letter-spacing: 2px;
+  line-height: 30px;
+  color: #fff;
+  text-decoration: none;
+  font-weight: 700;
+}
+
+.header_wrap .menu_bar .menu_center:hover li span a {
+  color: #000;
+  opacity: 1;
+}
+
+.header_wrap .menu_bar .menu_center li:hover span a:hover {
+  color: #ea094b;
+  transition: opacity 0.2s;
+  opacity: 1;
+}
+
+.header_wrap .menu_bar .menu_center > li:nth-child(6) {
+  font-weight: 700;
+}
+
+.header_wrap .menu_bar .menu_center li span a::after {
+  display: block;
+  content: "";
+  width: 100%;
+  height: 2px;
+  background: #dfdfdf;
+  opacity: 0;
+}
+
+.header_wrap .menu_bar .menu_center li:hover span a {
+  color: #ea094b;
+  font-weight: 700;
+}
+
+.header_wrap .menu_bar .menu_center li:hover span a::after {
+  display: block;
+  content: "";
+  width: 100%;
+  height: 2px;
+  background: #ea094b;
+  opacity: 1;
+}
+
+.header_wrap .menu_bar .menu_center .inner {
+  opacity: 0;
+}
+
+.header_wrap .menu_bar .menu_center:hover .inner {
+  opacity: 1;
+  margin-top: 18px;
+}
+
+.header_wrap .menu_bar .menu_center li a {
+  color: #242424;
+  text-decoration: none;
+  font-size: 14px;
+  line-height: 24px;
+  opacity: 1;
+}
+
+.header_wrap .menu_right {
+  width: 25%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  position: relative;
+  z-index: 2;
+}
+
+.header_wrap .menu_right .menu_right_top {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 5px;
+  margin-right: 5px;
+  margin-bottom: 10px;
+}
+
+.header_wrap .menu_right .menu_right_top a {
+  text-decoration: none;
+  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
+    "Lucida Sans", Arial, sans-serif;
+  font-size: 12px;
+  letter-spacing: 0.5px;
+  color: #fff;
+  opacity: 0.6;
+  padding-right: 23px;
+}
+
+.header_wrap .menu_right .menu_right_top a:hover {
+  opacity: 1;
+}
+
+.header_wrap .menu_right .menu_right_bottom {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  margin-right: 5px;
+}
+
+.header_wrap .menu_right .menu_right_bottom img {
+  width: 15px;
+  height: 15px;
+  margin-right: 5px;
+}
+
+.header_wrap .menu_right .menu_right_bottom a {
+  text-decoration: none;
+  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
+    "Lucida Sans", Arial, sans-serif;
+  font-size: 12px;
+  letter-spacing: 0.5px;
+  opacity: 0.8;
+  margin-right: 29px;
+  text-decoration: none;
+  color: #f0dec8;
+}
+
+.header_wrap .menu_right .menu_right_bottom a:hover {
+  opacity: 1;
+}
+
+/* sidebar 영역*/
+.side_wrap {
+  position: relative;
+}
+
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: -580px;
+  left: 25px;
+  width: 20px;
+  padding: 15px;
+  border-radius: 30px;
+  background-color: rgba(218, 218, 218, 0.3);
+}
+
+.sidebar ul li a {
+  font-size: 14px;
+  color: #fff;
+  text-decoration: none;
+  font-size: 0px;
+}
+
+.sidebar ul li:nth-child(1) img {
+  width: 20px;
+  height: 20px;
+  padding-top: 15px;
+}
+
+.sidebar ul li img {
+  width: 20px;
+  height: 20px;
+  padding-top: 15px;
+  padding-bottom: 15px;
+}
+
+.sides a {
+  position: relative;
+  display: inline-block;
+  text-decoration: none;
+}
+
+.sides li a:hover .tooltip span {
+  position: absolute;
+  white-space: nowrap;
+  top: 28%;
+  left: 70%;
+  padding-left: 20px;
+  padding-right: 20px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  margin-left: 20px;
+  font-size: 16px;
+  color: #ea094b;
+  background-color: #fff;
+}
+
+/* find a store*/
+.find {
+  display: flex;
+  flex-direction: row;
+  position: absolute;
+  top: -200px;
+  left: 10%;
+}
+
+.find img {
+  width: 16px;
+  height: 20px;
+  margin-right: 6px;
+}
+
+.find a {
+  color: #ffffff;
+  text-decoration: none;
+  font-size: 18px;
+}
+
+.find a:hover {
+  color: #ea094b;
+  font-weight: bolder;
+  font-size: 22px;
+  transition: 0.3s;
+}
+
+.find a:hover > img {
+  transform: scale(1.4);
+  transition: 0.5s;
+}
+
+/* notice slider 영역 */
+.notice {
+  display: flex;
+  position: absolute;
+  top: 92%;
+  width: 600px;
+  height: 75px;
+  overflow: hidden;
+  background: #fff;
+  color: #333;
+}
+
+.notice_center {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  margin-top: -22.5px;
+  background: #fff;
+}
+
+.notice_swiper {
+  position: relative;
+  width: 100%;
+  text-align: center;
+  line-height: 45px;
+  height: 45px;
+}
+
+.notice_swiper .notice_pre {
+  position: absolute;
+  top: 0;
+  height: 45px;
+  margin-left: 80px;
+  font-family: "Noto Sans KR" sans-serif;
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.notice_swiper .change_outer {
+  position: absolute;
+  top: 0;
+  left: 30%;
+  text-align: left;
+  height: 45px;
+  overflow: hidden;
+}
+
+.notice_swiper .change_outer .change_inner {
+  position: relative;
+  animation: rotate 15s ease-in-out infinite;
+}
+
+.notice_swiper .change_outer .element {
+  display: block;
+  font-size: 16px;
+}
+
+@keyframes rotate {
+  10%,
+  15%,
+  100% {
+    transform: translateY(0);
+  }
+
+  25%,
+  36% {
+    transform: translateY(-45px);
+  }
+
+  46%,
+  57% {
+    transform: translateY(-90px);
+  }
+
+  67%,
+  78% {
+    transform: translateY(-135px);
+  }
+
+  88%,
+  99% {
+    transform: translateY(-180px);
+  }
+}
+
+.footer_wrap .events {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  background-color: #382e2c;
+  padding: 50px;
+}
+
+.footer_wrap .events .event1 {
+  margin-right: 80px;
+  background-image: url("/images/event1.jpg");
+  width: 854px;
+  height: 548px;
+  opacity: 0.6;
+  border-radius: 150px 0 0 0;
+  cursor: pointer;
+}
+
+.footer_wrap .events .event1 a {
+  text-decoration: none;
+  color: inherit;
+}
+
+.footer_wrap .events .event1 h3 {
+  font-size: 4em;
+  letter-spacing: -4px;
+  margin: 50px 50px 30px;
+  color: #fff;
+}
+
+.footer_wrap .events .event2 h3 {
+  font-size: 4em;
+  letter-spacing: -4px;
+  margin: 180px 30px 30px;
+  color: #fff;
+}
+
+.footer_wrap .events .event1 span {
+  font-size: 20px;
+  margin-left: 50px;
+  color: #484848;
+}
+
+.footer_wrap .events .event2 span {
+  font-size: 20px;
+  margin-left: 30px;
+  color: #e6e6e6;
+}
+
+.footer_wrap .events .event1:hover {
+  margin-right: 80px;
+  background-image: url("/images/event1.jpg");
+  width: 854px;
+  height: 548px;
+  opacity: 1;
+  border-radius: 150px 0 0 0;
+}
+
+.footer_wrap .events .event1:hover h3 {
+  background-color: #ea094b;
+  margin-left: -30px;
+  margin-right: -30px;
+  padding: 15px;
+  text-shadow: 2px 2px #525252;
+  transition: 0.2s;
+  opacity: 1;
+}
+
+.footer_wrap .events .event1:hover span {
+  color: #292929;
+  font-weight: 700;
+}
+
+.footer_wrap .events .event2 {
+  background-image: url("/images/event2.jpg");
+  width: 400px;
+  height: 548px;
+  opacity: 0.6;
+  border-radius: 0 0 150px 0;
+  cursor: pointer;
+}
+
+.footer_wrap .events .event2 a {
+  text-decoration: none;
+}
+
+.footer_wrap .events .event2:hover {
+  background-image: url("/images/event2.jpg");
+  width: 400px;
+  height: 548px;
+  opacity: 1;
+  border-radius: 0 0 150px 0;
+}
+
+.footer_wrap .events .event2:hover h3 {
+  background-color: #ea094b;
+  margin-left: -10px;
+  margin-right: -10px;
+  padding: 15px;
+  text-shadow: 2px 2px #525252;
+  transition: 0.2s;
+  opacity: 1;
+}
+
+.footer_wrap .events .event2:hover span {
+  color: #fff;
+}
+
+.footer_wrap .utils {
+  background-color: #3c3937;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  height: 180px;
+}
+
+.footer_wrap .utils .util_left {
+  padding: 2%;
+}
+
+.footer_wrap .utils .util_left a {
+  font-size: 13px;
+  margin-right: 20px;
+  color: #fff;
+  text-decoration: none;
+  opacity: 0.8;
+}
+
+.footer_wrap .utils .util_left a:hover {
+  opacity: 1;
+}
+
+.footer_wrap .utils .util_left span::after {
+  display: inline-block;
+  border-right: 1px solid #a7a7a7;
+}
+
+.footer_wrap .utils .util_left .biz {
+  font-size: 12px;
+  margin-top: 30px;
+  color: #c0c0c0;
+  line-height: 18px;
+}
+
+.footer_wrap .utils .util_right {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  align-items: center;
+  width: 25%;
+  margin-right: 1%;
+}
+
+.footer_wrap .utils .util_right img:nth-child(1) {
+  width: 60px;
+  height: 60px;
+}
+
+.footer_wrap .utils .util_right img:nth-child(2) {
+  width: 174px;
+  height: 46px;
+}
+
+.footer_wrap .utils .util_right a:nth-child(3) img,
+.footer_wrap .utils .util_right a:nth-child(4) img {
+  width: 20px;
+  height: 20px;
+}
+
+.footer_wrap .utils .util_right a:nth-child(5) img {
+  width: 25px;
+  height: 30px;
+}
diff --git a/main.js b/main.js
new file mode 100644
index 00000000..3500df16
--- /dev/null
+++ b/main.js
@@ -0,0 +1,100 @@
+let slideIndex = 0;
+showSlides();
+
+function showSlides() {
+  const SECONDS_TO_MS = 1000;
+  let slides = document.getElementsByClassName("my-slides");
+  for (i = 0, max = slides.length; i < max; i++) {
+    slides[i].style.display = "none";
+  }
+  slideIndex++;
+  if (slideIndex > slides.length) {
+    slideIndex = 1;
+  }
+  slides[slideIndex - 1].style.display = "block";
+  setTimeout(showSlides, 7 * SECONDS_TO_MS); // Change image every 7 seconds
+}
+
+// Get the elements needed
+const logoImage = document.getElementById("logoImage");
+const innerArea = document.querySelector("nav");
+
+// Add event listener to handle hover
+innerArea.addEventListener("mouseenter", () => {
+  // Change the image source to logo_h.png when hovering
+  logoImage.src = "/images/logo_h.png";
+});
+
+innerArea.addEventListener("mouseleave", () => {
+  // Change the image source back to logo.png when not hovering
+  logoImage.src = "/images/logo.png";
+});
+
+// Get the elements needed
+const sidesImages = document.querySelectorAll(".sides img");
+
+// Function to change the image on hover
+function changeImageOnHover(event) {
+  const image = event.currentTarget;
+  const altImageSrc = image.getAttribute("data-hover-src");
+
+  if (altImageSrc) {
+    // Store the original source in a custom attribute to switch back later
+    if (!image.getAttribute("data-original-src")) {
+      image.setAttribute("data-original-src", image.src);
+    }
+
+    image.src = altImageSrc;
+  }
+}
+
+// Function to switch back to the original image when not hovered
+function switchBackToOriginal(event) {
+  const image = event.target;
+  const originalSrc = image.getAttribute("data-original-src");
+
+  if (originalSrc) {
+    image.src = originalSrc;
+  }
+}
+
+// Add event listeners to handle hover effect on all images in the .sides list
+sidesImages.forEach((image) => {
+  // Extract the original source from the 'src' attribute and store it as 'data-original-src'
+  image.setAttribute("data-original-src", image.src);
+  image.addEventListener("mouseenter", changeImageOnHover);
+  image.addEventListener("mouseleave", switchBackToOriginal);
+});
+
+// Get the elements needed
+const menuRightTop = document.querySelectorAll(".menu_right_top a");
+const menuRightBot = document.querySelectorAll(".menu_right_bottom a");
+const hoveredArea = document.querySelector(".menu_center");
+// Add event listener to handle hover
+hoveredArea.addEventListener("mouseenter", () => {
+  menuRightTop.forEach((anchor) => {
+    anchor.style.color = "#242424";
+  });
+  menuRightBot.forEach((anchor) => {
+    anchor.style.color = "#594c3c";
+  });
+});
+
+hoveredArea.addEventListener("mouseleave", () => {
+  // Change the font color of all anchor elements back to #F0DEC8 when not hovering
+  menuRightTop.forEach((anchor) => {
+    anchor.style.color = "#fff";
+  });
+  menuRightBot.forEach((anchor) => {
+    anchor.style.color = "#F0DEC8";
+  });
+});
+
+/**
+ * 슬라이드 요소 관리
+ */
+new Swiper(".notice .swiper-container", {
+  direction: "vertical", // 수직 슬라이드
+  autoplay: true, // 자동 재생 여부
+  loop: true, // 반복 재생 여부
+});