diff --git a/README.md b/README.md
index 598dc30f..73565275 100644
--- a/README.md
+++ b/README.md
@@ -1,45 +1,16 @@
-# 👀 자신이 원하는 사이트 레이아웃 클론
+# 🌯 써브웨이 클론코딩
 
-원하는 사이트(페이지)를 자유롭게 선택하고 레이아웃을 클론 코딩하세요.  
-평소에 도전해 보고 싶었거나 혹은 자신의 수준에 맞는 사이트(페이지)를 선택하세요.   
-과제 수행 및 리뷰 기간은 별도 공지를 참고하세요!
+평소 좋아하는 써브웨이의 메인페이지를 클론 코딩하게 되었습니다.
+써브웨이의 색감이 이쁘고, 맛있어 보이는 이미지가 많아 클론 코딩하면서
+나름 재밌게 해 볼 수 있었던 것 같습니다.
+아직 많이 부족한 실력이라 JS는 구현하지 않았고 HTML과 CSS로 최대한 비슷하게 구현해냈습니다.
 
-## 과제 수행 및 제출 방법
+## 웹페이지에 대한 설명
 
-1. 현재 저장소를 로컬에 클론(Clone)합니다.
-1. 자신의 본명으로 브랜치를 생성합니다.(구분 가능하도록 본명을 꼭 파스칼케이스로 표시하세요, `git branch KDT0_ParkYoungWoong`)
-1. 자신의 본명 브랜치에서 과제를 수행합니다.
-1. 과제 수행이 완료되면, 자신의 본명 브랜치를 원격 저장소에 푸시(Push)합니다.(`main` 브랜치에 푸시하지 않도록 꼭 주의하세요, `git push origin KDT0_ParkYoungWoong`)
-1. 저장소에서 `main` 브랜치를 대상으로 Pull Request 생성하면, 과제 제출이 완료됩니다!(E.g, `main` <== `KDT0_ParkYoungWoong`)
+1. 써브웨이(https://www.subway.co.kr) 웹페이지와 박영웅 강사님의 스타벅스 예제 강의, 구글링 등을 참고하였습니다.
+2. 메인 메뉴는 원래 써브웨이 홈페이지처럼 `풀드롭다운` 으로 만들고 싶었으나 원하는 대로 만들어지지 않아 박영웅 강사님의 강의를 참고하여 만들어 기존과는 다른 형태로 만들었습니다.
+3. 배너와 슬라이드 바 변경 등은 아직 구현하긴 어렵다는 판단하에 HTML과 CSS로만 구현하였는데 제 스스로 아쉬움이 들어 추후 클론코딩을 다시 진행해보고 싶습니다.
 
-- `main` 혹은 다른 사람의 브랜치로 절대 병합하지 않도록 주의하세요!
-- Pull Request에서 보이는 설명을 다른 사람들이 이해하기 쉽도록 꼼꼼하게 작성하세요!
-- Pull Request에서 과제 제출 후 절대 병합(Merge)하지 않도록 주의하세요!
-- 과제 수행 및 제출 과정에서 문제가 발생한 경우, 바로 담당 멘토나 강사에서 얘기하세요!
+## 링크
 
-## 필수 요구사항
-
-- [ ] 과제에 대한 설명을 포함한 `README.md` 파일을 제공하세요!
-- [ ] 과제 결과와 비교할 수 있는 실제 사이트(페이지)의 주소를 명시하세요!
-- [ ] 과정에서 사용한 프로젝트 폴더/파일이 모두 포함돼야 합니다, 일부 파일만 제출하지 마세요! 
-- [ ] 실제 서비스로 배포하고 접근 가능한 링크를 추가해야 합니다.
-
-## 선택 요구사항
-
-- [ ] `<header>`, `<section>` 등 시멘틱 태그를 최대한 활용해보세요.
-- [ ] 실제 사이트의 레거시 코드 활용보단 최신의 CSS Flex 혹은 Grid 등을 활용해보세요.
-- [ ] 부분적으로 BEM 방법론을 도입해보세요.
-- [ ] JS가 필요한 부분은 되도록 생략하되 이유를 명시해보세요.(CSS로 대체 가능한지 피드백이 있을 수 있겠죠?!)
-- [ ] JS가 필요한 부분 중 구현할 부분이 있다면 자유롭게 구현해보세요.(JS 과제가 아니니까 가볍게 구현하시길 추천해요)
-- [ ] SCSS 등의 CSS 전처리도구를 도입해보세요.
-- [ ] SCSS 컴파일에 Webpack이나 Parcel 같은 번들러를 활용해보세요.
-
-## 손쉬운 이미지 추출 방법
-
-사이트 클론에 필요한 이미지를 좀 더 쉽게 추출하기 위해서 Chrome 확장 프로그램인 [Image Downloader](https://chrome.google.com/webstore/detail/image-downloader/cnpniohnfphhjihaiiggeabnkjhpaldj?hl=ko)를 사용하세요.
-
-1. 원하는 사이트 접속
-1. Image Downloader 확장 프로그램 실행
-1. 다운로드 원하는 이미지 선택
-1. 서브 폴더 이름(Save to subfolder) 명시
-1. 다운로드!
+- `써브웨이` : https://www.subway.co.kr
\ No newline at end of file
diff --git a/css/main.css b/css/main.css
new file mode 100644
index 00000000..f43b0c87
--- /dev/null
+++ b/css/main.css
@@ -0,0 +1,750 @@
+/* COMMON */
+body {
+  color: #292929;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.4;
+  font-family: 'Noto Sans KR', sans-serif;
+}
+img {
+  display: block;
+  overflow: clip;
+  overflow-clip-margin: content-box;
+}
+a {
+  text-decoration: none;
+}
+.inner {
+  width: 1100px;
+  margin: 0 auto;
+  position: relative;
+}
+.btn {
+  height: 36px;
+  line-height: 36px;
+  font-weight: 300;
+  padding: 9px 21px 9px 21px;
+  border: 2px solid #fff;
+  font-size: 16px;
+  color: #fff;
+  border-radius: 30px;
+  text-align: center;
+  cursor: pointer;
+  display: block;
+}
+
+/* HEADER */
+header {
+  background-color: #ffffff;
+  border-top: 5px solid #009223;
+  border-bottom: 1px solid #e5e5e5;
+  position: relative;
+  min-width: 1280px;
+}
+header .inner {
+  height: 164px;
+}
+header .inner .logo {
+  width: 202px;
+  position: absolute;
+  top: 35px;
+  left: 0;
+  right: 0;
+  margin: auto;
+}
+header .sub-menu {
+  position: absolute;
+  top: 35px;
+  right: 0;
+  display: flex;
+}
+header .sub-menu ul.menu {
+  display: flex;
+}
+header .sub-menu ul.menu li {
+  position: relative;
+}
+header .sub-menu ul.menu li::before {
+  content: '';
+  width: 3px;
+  height: 3px;
+  border-radius: 50px;
+  background-color: #ddd;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+}
+header .sub-menu ul.menu li:first-child:before {
+  display: none;
+}
+header .sub-menu ul.menu li a {
+  font-size: 13px;
+  padding: 10px 14px;
+  display: block;
+  color: #666666;
+}
+header .sub-menu ul.menu li a:hover {
+  color: #000;
+}
+header .sub-menu .language {
+  padding: 3px 3px;
+}
+header .main-menu {
+  position: absolute;
+  top: 105px;
+  left: 0;
+  right: 0;
+  width: 1170px;
+  margin: auto;
+  display: flex;
+  z-index: 9;
+}
+header .main-menu .item {
+  float: left;
+  position: relative;
+  width: 165px;
+  right: 55px;
+}
+header .main-menu .item .item__name {
+  padding: 10px 20px 34px 20px;
+  font-size: 18px;
+  font-weight: bold;
+  letter-spacing: -0.04em;
+  display: block;
+  position: absolute;
+  width: 90px;
+  left: 120px;
+  text-align: center;
+}
+header .main-menu .item:hover .item__name {
+  color: #009223;
+}
+header .main-menu .item .item__contents {
+  width: 100%;
+  position: fixed;
+  left: 0;
+  top: 170px;
+  display: none;
+}
+header .main-menu .item:hover .item__contents {
+  display: block;
+}
+header .main-menu .item .item__contents .contents__menu {
+  background-color: #fff;
+}
+header .main-menu .item .item__contents .contents__menu > ul {
+  display: flex;
+  padding: 20px 0px;
+}
+header .main-menu .item .item__contents .contents__menu > ul > li {
+  width: 220px;
+}
+header .main-menu .item .item__contents .contents__menu > ul > li h4 {
+  padding: 3px 0 12px 0;
+  font-size: 16px;
+  color: rgb(102, 102, 102);
+  cursor: pointer;
+}
+header .main-menu .item .item__contents .contents__menu > ul > li h4:hover {
+  color: #009223;
+  text-decoration: underline;
+}
+
+/* main */
+/* visual */
+.visual {
+  background-color: #fff;
+  position: relative;
+  height: 490px;
+}
+.visual .inner {
+  width: 1170px;
+  height: 490px;
+  margin: 0 auto;
+  position: relative;
+}
+.visual .title {
+  position: absolute;
+  z-index: 1;
+  left: 50%;
+  margin-left: -960px;
+}
+/* visual btn */
+.visual .visual-pager {
+  position: absolute;
+  right: 0;
+  bottom: 47px;
+  z-index: 2;
+}
+.visual .visual-pager .visual-pager-item {
+  display: inline-block;
+  margin: 50px 5px;
+}
+.visual .visual-pager a.visual-pager-link__active {
+  background-color: #ffc300;
+  width: 30px;
+  height: 10px;
+  display: block;
+  border-radius: 30px;
+  font-size: 0;
+  line-height: 0;
+}
+.visual .visual-pager .visual-pager-link__still {
+  background-color: #fff;
+  width: 10px;
+  height: 10px;
+  display: block;
+  border-radius: 30px;
+  font-size: 0;
+  line-height: 0;
+}
+/* visual quick link */
+.visual .quick_link {
+  overflow: hidden;
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  width: 600px;
+  text-align: right;
+  z-index: 5;
+}
+.visual .quick_link_contents {
+  display: flex;
+  height: 80px;
+}
+.visual .quick_link_contents > div {
+  vertical-align: bottom;
+  height: 100%;
+}
+.visual .quick_link_contents > div a {
+  display: block;
+  width: 300px;
+  height: 80px;
+  position: relative;
+  text-align: center;
+  overflow: hidden;
+}
+.visual .quick_link_contents > div a > strong {
+  font-size: 22px;
+  font-weight: bold;
+  display: inline-block;
+  padding: 27px 0 0 0;
+}
+.visual .quick_link_contents > div a > strong::before {
+  content: '';
+  display: inline-block;
+  vertical-align: middle;
+  padding-right: 3px;
+  position: relative;
+  top: -2px;
+}
+.visual .quick_link .div a {
+  display: block;
+  width: 300px;
+  height: 80px;
+  position: relative;
+  text-align: center;
+  overflow: hidden;
+}
+.visual .quick_link .div a > strong {
+  font-size: 22px;
+  font-weight: bold;
+  display: inline-block;
+  padding: 27px 0 0 0;
+}
+.visual .quick_link .div a > strong::before {
+  content: '';
+  display: inline-block;
+  vertical-align: middle;
+  padding-right: 13px;
+  position: relative;
+  top: -2px;
+}
+.visual .quick_link .store a {
+  background-color: #ffce32;
+  border-radius: 30px 0 0 0;
+  float: right;
+  transition-duration: 0.2s;
+  letter-spacing: -0.02em;
+}
+.visual .quick_link .store a > strong {
+  color: #292929;
+  display: block;
+}
+.visual .quick_link .store a > strong::before {
+  background: url(https://www.subway.co.kr/images/main/icon_map.png) 0 0
+    no-repeat;
+  width: 24px;
+  height: 30px;
+}
+.visual .quick_link .franchise a {
+  background-color: #009223;
+  border-radius: 0 0 30px 0;
+  float: left;
+  letter-spacing: -0.05em;
+}
+.visual .quick_link .franchise a > strong {
+  color: #fff;
+}
+.visual .quick_link .franchise a > strong::before {
+  background: url(https://www.subway.co.kr/images/main/icon_franchise.png) 0 0
+    no-repeat;
+  width: 34px;
+  height: 30px;
+}
+
+/* section subway menu */
+.section_subway_menu {
+  padding: 60px 0 0;
+}
+.section_subway_menu .hd {
+  width: 1170px;
+  margin: 0 auto;
+  padding-bottom: 33px;
+  position: relative;
+  display: flex;
+}
+.section_subway_menu .hd > h2 {
+  color: #292929;
+  font-size: 40px;
+  font-weight: bold;
+  font-family: 'Noto Sans KR', sans-serif;
+  background: url(../images/main/bul_tit.png) 0 12px no-repeat;
+  min-height: 60px;
+  padding: 17px 0 0 25px;
+  margin-bottom: 1px;
+}
+.section_subway_menu .hd .tab {
+  position: absolute;
+  top: 15px;
+  right: 0;
+}
+.section_subway_menu .hd .tab > ul {
+  font-family: 'Noto Sans KR', sans-serif;
+  display: flex;
+}
+.section_subway_menu .hd .tab > ul > li {
+  position: relative;
+}
+.section_subway_menu .hd .tab > ul > li::before {
+  content: "";
+  width: 1px;
+  height: 12px;
+  background-color: #DDDDDD;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+}
+.section_subway_menu .hd .tab > ul > li:first-child:before {
+  display: none;
+}
+.section_subway_menu .hd .tab > ul > li > a {
+  font-size: 16px;
+  color: #666666;
+  font-weight: 300;
+  letter-spacing: -0.03em;
+  padding: 22px 22px;
+  display: block;
+}
+.section_subway_menu .hd .tab > ul > li.active a {
+  color: #009223;
+  font-weight: bold;
+}
+/* subway_slider_wrapper */
+.subway_slider_wrapper {
+  height: 450px;
+  background-color: #fff;
+}
+.subway_slider_wrapper .inner {
+  width: 1200px;
+  margin: 0 auto;
+  display: flex;
+  cursor: pointer;
+  right: 140px;
+}
+.subway_slider_wrapper .inner .classic-wrapper {
+  width: 270px;
+  height: 320px;
+  text-align: center;
+  font-size: 200px;
+  position: relative;
+  margin: 0 0 0 30px;
+}
+.subway_slider_wrapper .inner .classic-wrapper > img {
+  width: 260px;
+}
+.subway_slider_wrapper .inner .classic-wrapper > strong {
+  font-size: 18px;
+  color: #292929;
+  margin: 3px 0 10px;
+  display: block;
+  font-weight: bold;
+}
+.subway_slider_wrapper .inner .classic-wrapper > p {
+  font-size: 13px;
+  color: #999999;
+  line-height: 21px;
+  width: 260px;
+  margin: 0 auto;
+  letter-spacing: -0.04em;
+}
+/* slider-btn */
+.subway_slider_wrapper .control_btn {
+  display: inline-block;
+  margin: 5px;
+  margin-top: 125px;
+}
+.subway_slider_wrapper a.bx-prev {
+  background-position: 0 0;
+  left: 150px;
+  background-image: url(../images/news/icon_event_slider_arr\ -\ left.png);
+  margin-right: 80px;
+  width: 50px;
+  height: 50px;
+  display: block;
+  font-size: 0;
+  line-height: 0;
+}
+.subway_slider_wrapper a.bx-next {
+  background-position: 100% 0;
+  right: 150px;
+  background-image: url(../images/news/icon_event_slider_arr\ -\ right.png);
+  margin-left: 120px;
+  width: 50px;
+  height: 50px;
+  display: block;
+  font-size: 0;
+  line-height: 0;
+}
+
+/* section_subway */
+.section_subway {
+  background-image: url(../images/main/bg_content.gif);
+}
+.section_subway .section_subway_inner {
+  width: 1280px;
+  margin: 0 auto;
+  padding: 80px 0;
+}
+.section_subway .section_subway_inner .content_top {
+  overflow: hidden;
+}
+.section_subway .section_subway_inner .content_top .utilization {
+  background: url(../images/main/bg_utilization.png) 0 0 no-repeat;
+  width: 400px;
+  height: 300px;
+  position: relative;
+  margin-left: 55px;
+  float: left;
+}
+.section_subway .section_subway_inner .content_top .utilization p {
+  color: #fff;
+  font-size: 28px;
+  font-weight: bold;
+  line-height: 40px;
+  letter-spacing: -0.03em;
+  position: absolute;
+  left: 39px;
+  top: 38px;
+}
+.section_subway .section_subway_inner .content_top .utilization .btn {
+  position: absolute;
+  left: 41px;
+  bottom: 42px;
+  padding: 9px 21px 9px 21px;
+  border: 2px solid #fff;
+  border-radius: 30px;
+  width: 92px;
+  padding: 1px;
+}
+.section_subway .section_subway_inner .content_top .utilization .btn span {
+  display: block;
+  height: 36px;
+  line-height: 36px;
+  color: #fff;
+  font-size: 16px;
+  font-weight: bold;
+}
+.section_subway .section_subway_inner .content_top .history {
+  float: left;
+  width: 825px;
+  position: relative
+}
+.section_subway .section_subway_inner .content_top .history p {
+  color: #fff;
+  font-size: 28px;
+  font-weight: bold;
+  line-height: 40px;
+  letter-spacing: -0.03em;
+  position: absolute;
+  left: 410px;
+  top: 38px;
+}
+.section_subway .section_subway_inner .content_top .history .btn {
+  position: absolute;
+  left: 410px;
+  bottom: 42px;
+  border: 2px solid #fff;
+  border-radius: 30px;
+  width: 128px;
+  padding: 1px;
+}
+.section_subway .section_subway_inner .content_top .history .btn span {
+  display: block;
+  height: 36px;
+  line-height: 36px;
+  color: #fff;
+  font-size: 16px;
+  font-weight: bold;
+}
+.section_subway .section_subway_inner .content_bottom {
+  margin: 30px 0 0 55px;
+  overflow: hidden;
+}
+.section_subway .section_subway_inner .content_bottom .whats_new {
+  background-color: #fff;
+  width: 870px;
+  height: 300px;
+  border-radius: 30px 0 30px 0;
+  position: relative;
+  float: left;
+}
+.section_subway .section_subway_inner .content_bottom .whats_new .hd {
+  position: absolute;
+  top: 75px;
+  left: 60px
+}
+.section_subway .section_subway_inner .content_bottom .whats_new .hd h2 {
+  color: #292929;
+  font-size: 30px;
+  font-weight: bold;
+  font-family: font_sw;
+  background: url(../images/main/bul_tit.png) 0 0 no-repeat;
+  min-height: 60px;
+  padding: 17px 0 0 25px;
+  margin-bottom: 1px
+}
+.section_subway .section_subway_inner .content_bottom .whats_new .hd p {
+  text-align: center;
+  line-height: 26px;
+  letter-spacing: -0.04em;
+}
+.section_subway .section_subway_inner .content_bottom .whats_new .board_list {
+  position: absolute;
+  left: 389px;
+  top: 76px;
+}
+.section_subway .section_subway_inner .content_bottom .whats_new .board_list ul li {
+  margin-top: 21px;
+}
+.section_subway .section_subway_inner .content_bottom .whats_new .board_list ul li:first-child {
+  margin-top: 0
+}
+.section_subway .section_subway_inner .content_bottom .whats_new .board_list ul li a {
+  display: inline-block;
+  font-size: 16px;
+  color: #292929;
+  position: relative;
+  letter-spacing: -0.04em
+}
+.section_subway .section_subway_inner .content_bottom .whats_new .board_list ul li a:after {
+  content: '';
+  height: 1px;
+  left: 0;
+  bottom: 1px;
+  width: 0;
+  background-color: #009223;
+  position: absolute;
+  transition-duration: 0.2s
+}
+.section_subway .section_subway_inner .content_bottom .whats_new .board_list ul li a:hover {
+  color: #009223;
+}
+.section_subway .section_subway_inner .content_bottom .whats_new .board_list ul li a:hover:after {
+  width: 100%;
+}
+.section_subway .section_subway_inner .content_bottom .whats_new .board_list .more {
+  display: inline-block;
+  color: #999999;
+  font-size: 14px;
+  padding: 33px 0 8px
+}
+.section_subway .section_subway_inner .content_bottom .banner_sponsor {
+  float: left;
+  width: 270px;
+  height: 300px;
+  margin-left: 30px;
+  position: relative;
+  overflow: hidden;
+  ; border-radius: 0 30px 0 30px;
+}
+.section_subway .section_subway_inner .content_bottom .banner_sponsor .bx-wrapper .bx-pager {
+  position: absolute;
+  right: 15px;
+  top: 14px
+}
+.section_subway .section_subway_inner .content_bottom .banner_sponsor .bx-wrapper .bx-pager .bx-pager-item {
+  display: inline-block;
+  margin: 0 5px;
+}
+.section_subway .section_subway_inner .content_bottom .banner_sponsor .bx-wrapper .bx-pager a {
+  display: block;
+  width: 10px;
+  height: 10px;
+  background-color: #fff;
+  font-size: 0;
+  line-height: 0;
+  text-indent: -9999px;
+  overflow: hidden;
+  border-radius: 30px;
+  transition-duration: 0.3s
+}
+.section_subway .section_subway_inner .content_bottom .banner_sponsor .bx-wrapper .bx-pager a.active {
+  background-color: #ffc300;
+  width: 30px;
+}
+
+/* quick menu */
+.quick_menu {
+  text-align: center;
+  background-color: #fff;
+  padding: 40px 0 37px;
+}
+.quick_menu ul {
+  overflow: hidden;
+  display: inline-block;
+}
+.quick_menu ul li {
+  float: left;
+  margin-left: 80px;
+}
+.quick_menu ul li:first-child {
+  margin-left: 0
+}
+.quick_menu ul li a {
+  display: block;
+  overflow: hidden;
+  position: relative;
+  height: 70px;
+  padding-left: 90px;
+}
+.quick_menu ul li .icon {
+  background: url(../images/main/icon_quickmenu.png) no-repeat;
+  width: 70px;
+  height: 70px;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+.quick_menu ul li strong {
+  color: #292929;
+  font-size: 18px;
+  display: block;
+  margin-top: 12px;
+  letter-spacing: -0.04em;
+  text-align: left;
+  font-weight: bold;
+}
+.quick_menu ul li span {
+  color: #999999;
+  font-size: 13px;
+  display: block;
+  margin-top: 6px;
+  letter-spacing: -0.02em;
+  text-align: left;
+}
+.quick_menu ul li.qm01 .icon {
+  background-position: 0px 0px;
+}
+.quick_menu ul li.qm02 .icon {
+  background-position: -70px 0px;
+}
+.quick_menu ul li.qm03 .icon {
+  background-position: -140px 0px;
+}
+.quick_menu ul li.qm04 .icon {
+  background-position: -210px 0px;
+}
+
+/* footer */
+footer {
+  background-color: #292929;
+  color: #666666;
+  padding: 22px 0;
+  position: relative;
+  z-index: 9;
+  height: 100px;
+}
+footer::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 59px;
+  width: 100%;
+  height: 1px;
+  background-color: #3b3b3b;
+}
+footer .content {
+  width: 1170px;
+  margin: 0 auto;
+  position: relative;
+}
+footer .until_menu {
+  margin-bottom: 25px;
+}
+footer .menu {
+  overflow: hidden;
+}
+footer .menu li {
+  float: left;
+  margin-right: 29px;
+}
+footer .menu li a {
+  color: #666666;
+  display: block;
+  font-size: 14px;
+  letter-spacing: -0.05em;
+}
+footer .menu li a strong {
+  color: #bbbbbb;
+}
+footer .info span {
+  position: relative;
+  display: inline-block;
+  margin-top: 35px;
+  font-size: 13px;
+  padding-left: 9px;
+  margin-left: 3px;
+  letter-spacing: -0.01em;
+}
+footer .info span.addr {
+  padding-left: 0;
+  margin-left: 0;
+}
+footer .content .copyright {
+  font-family: 'Noto Sans KR', sans-serif;
+  font-size: 13px;
+  line-height: 25px;
+  padding-top: 2px;
+  letter-spacing: 0.005em;
+}
+footer .content .sns_area {
+  position: absolute;
+  right: 40px;
+  bottom: 3px;
+  text-indent: -9999px;
+  font-size: 0;
+  line-height: 0;
+  width: 50px;
+  height: 50px;
+  display: block;
+}
+footer .content .sns_area.fackbook {
+  background: url(../images/common/icon_sns_facebook.png) 0 0 no-repeat;
+}
+footer .content .sns_area.instagram {
+  right: 105px;
+  background: url(../images/common/icon_sns_instar.png) 0 0 no-repeat;
+}
\ No newline at end of file
diff --git a/favicon.png b/favicon.png
new file mode 100644
index 00000000..1f0823df
Binary files /dev/null and b/favicon.png differ
diff --git a/favicon_s.ico b/favicon_s.ico
new file mode 100644
index 00000000..74608e6c
Binary files /dev/null and b/favicon_s.ico differ
diff --git a/images/common/bg_header_shodow.png b/images/common/bg_header_shodow.png
new file mode 100644
index 00000000..356dd1f8
Binary files /dev/null and b/images/common/bg_header_shodow.png differ
diff --git a/images/common/icon_sns_facebook.png b/images/common/icon_sns_facebook.png
new file mode 100644
index 00000000..4f4f0b26
Binary files /dev/null and b/images/common/icon_sns_facebook.png differ
diff --git a/images/common/icon_sns_instar.png b/images/common/icon_sns_instar.png
new file mode 100644
index 00000000..152ea504
Binary files /dev/null and b/images/common/icon_sns_instar.png differ
diff --git a/images/common/icon_utill_global.png b/images/common/icon_utill_global.png
new file mode 100644
index 00000000..4c02cb9c
Binary files /dev/null and b/images/common/icon_utill_global.png differ
diff --git a/images/common/logo_w.png b/images/common/logo_w.png
new file mode 100644
index 00000000..49485cfa
Binary files /dev/null and b/images/common/logo_w.png differ
diff --git a/images/main/bg_content.gif b/images/main/bg_content.gif
new file mode 100644
index 00000000..9c209b22
Binary files /dev/null and b/images/main/bg_content.gif differ
diff --git a/images/main/bg_utilization.png b/images/main/bg_utilization.png
new file mode 100644
index 00000000..d46aa52b
Binary files /dev/null and b/images/main/bg_utilization.png differ
diff --git a/images/main/btn_more.png b/images/main/btn_more.png
new file mode 100644
index 00000000..4d0b8ff2
Binary files /dev/null and b/images/main/btn_more.png differ
diff --git a/images/main/bul_tit.png b/images/main/bul_tit.png
new file mode 100644
index 00000000..2e19f7fc
Binary files /dev/null and b/images/main/bul_tit.png differ
diff --git a/images/main/icon_franchise.png b/images/main/icon_franchise.png
new file mode 100644
index 00000000..c1d2cd2f
Binary files /dev/null and b/images/main/icon_franchise.png differ
diff --git a/images/main/icon_map.png b/images/main/icon_map.png
new file mode 100644
index 00000000..5ec67c0d
Binary files /dev/null and b/images/main/icon_map.png differ
diff --git a/images/main/icon_quickmenu.png b/images/main/icon_quickmenu.png
new file mode 100644
index 00000000..d80a201d
Binary files /dev/null and b/images/main/icon_quickmenu.png differ
diff --git a/images/main/img_subway_history.png b/images/main/img_subway_history.png
new file mode 100644
index 00000000..e3e7012a
Binary files /dev/null and b/images/main/img_subway_history.png differ
diff --git a/images/menu/sandwich_bf01.png b/images/menu/sandwich_bf01.png
new file mode 100644
index 00000000..a8942129
Binary files /dev/null and b/images/menu/sandwich_bf01.png differ
diff --git a/images/menu/sandwich_bf02.png b/images/menu/sandwich_bf02.png
new file mode 100644
index 00000000..006209b5
Binary files /dev/null and b/images/menu/sandwich_bf02.png differ
diff --git a/images/menu/sandwich_cl01_01.jpg b/images/menu/sandwich_cl01_01.jpg
new file mode 100644
index 00000000..2a25abc8
Binary files /dev/null and b/images/menu/sandwich_cl01_01.jpg differ
diff --git a/images/menu/sandwich_cl02_01.jpg b/images/menu/sandwich_cl02_01.jpg
new file mode 100644
index 00000000..f9ce7167
Binary files /dev/null and b/images/menu/sandwich_cl02_01.jpg differ
diff --git a/images/menu/sandwich_cl04_01.jpg b/images/menu/sandwich_cl04_01.jpg
new file mode 100644
index 00000000..b12977a0
Binary files /dev/null and b/images/menu/sandwich_cl04_01.jpg differ
diff --git a/images/menu/sandwich_cl05_01.jpg b/images/menu/sandwich_cl05_01.jpg
new file mode 100644
index 00000000..d179e5ae
Binary files /dev/null and b/images/menu/sandwich_cl05_01.jpg differ
diff --git a/images/menu/sandwich_cl06_01.jpg b/images/menu/sandwich_cl06_01.jpg
new file mode 100644
index 00000000..41a5c8a1
Binary files /dev/null and b/images/menu/sandwich_cl06_01.jpg differ
diff --git a/images/menu/sandwich_fl01_01.jpg b/images/menu/sandwich_fl01_01.jpg
new file mode 100644
index 00000000..83b4344e
Binary files /dev/null and b/images/menu/sandwich_fl01_01.jpg differ
diff --git a/images/menu/sandwich_fl02_01.jpg b/images/menu/sandwich_fl02_01.jpg
new file mode 100644
index 00000000..5b6ead46
Binary files /dev/null and b/images/menu/sandwich_fl02_01.jpg differ
diff --git a/images/menu/sandwich_fl04_01.jpg b/images/menu/sandwich_fl04_01.jpg
new file mode 100644
index 00000000..b5f6597f
Binary files /dev/null and b/images/menu/sandwich_fl04_01.jpg differ
diff --git a/images/menu/sandwich_fl05_01.jpg b/images/menu/sandwich_fl05_01.jpg
new file mode 100644
index 00000000..5c55aa33
Binary files /dev/null and b/images/menu/sandwich_fl05_01.jpg differ
diff --git a/images/menu/sandwich_fl06_01.jpg b/images/menu/sandwich_fl06_01.jpg
new file mode 100644
index 00000000..47b28a9a
Binary files /dev/null and b/images/menu/sandwich_fl06_01.jpg differ
diff --git a/images/menu/sandwich_pm01_01.jpg b/images/menu/sandwich_pm01_01.jpg
new file mode 100644
index 00000000..bd709ef6
Binary files /dev/null and b/images/menu/sandwich_pm01_01.jpg differ
diff --git a/images/menu/sandwich_pm02_01.jpg b/images/menu/sandwich_pm02_01.jpg
new file mode 100644
index 00000000..ac7f7afc
Binary files /dev/null and b/images/menu/sandwich_pm02_01.jpg differ
diff --git a/images/menu/sandwich_pm06_01.jpg b/images/menu/sandwich_pm06_01.jpg
new file mode 100644
index 00000000..a8e9ec67
Binary files /dev/null and b/images/menu/sandwich_pm06_01.jpg differ
diff --git a/images/menu/sandwich_pm07_01.jpg b/images/menu/sandwich_pm07_01.jpg
new file mode 100644
index 00000000..9266ec12
Binary files /dev/null and b/images/menu/sandwich_pm07_01.jpg differ
diff --git a/images/menu/sandwich_pm08_01.jpg b/images/menu/sandwich_pm08_01.jpg
new file mode 100644
index 00000000..66b5f0ae
Binary files /dev/null and b/images/menu/sandwich_pm08_01.jpg differ
diff --git a/images/menu/sandwich_pm10_01.jpg b/images/menu/sandwich_pm10_01.jpg
new file mode 100644
index 00000000..02b7f551
Binary files /dev/null and b/images/menu/sandwich_pm10_01.jpg differ
diff --git a/images/news/icon_event_slider_arr - left.png b/images/news/icon_event_slider_arr - left.png
new file mode 100644
index 00000000..05a795ca
Binary files /dev/null and b/images/news/icon_event_slider_arr - left.png differ
diff --git a/images/news/icon_event_slider_arr - right.png b/images/news/icon_event_slider_arr - right.png
new file mode 100644
index 00000000..df14a295
Binary files /dev/null and b/images/news/icon_event_slider_arr - right.png differ
diff --git a/images/news/icon_event_slider_arr.png b/images/news/icon_event_slider_arr.png
new file mode 100644
index 00000000..4f91772a
Binary files /dev/null and b/images/news/icon_event_slider_arr.png differ
diff --git a/images/subway_seo.png b/images/subway_seo.png
new file mode 100644
index 00000000..f98732ce
Binary files /dev/null and b/images/subway_seo.png differ
diff --git "a/images/upload&banner/PC \353\251\224\354\235\270 \353\260\260\353\204\210_20230302091420034.jpg" "b/images/upload&banner/PC \353\251\224\354\235\270 \353\260\260\353\204\210_20230302091420034.jpg"
new file mode 100644
index 00000000..04b37c4a
Binary files /dev/null and "b/images/upload&banner/PC \353\251\224\354\235\270 \353\260\260\353\204\210_20230302091420034.jpg" differ
diff --git "a/images/upload&banner/PC \353\251\224\354\235\270 \353\260\260\353\204\210_20230302091516857.jpg" "b/images/upload&banner/PC \353\251\224\354\235\270 \353\260\260\353\204\210_20230302091516857.jpg"
new file mode 100644
index 00000000..143664d8
Binary files /dev/null and "b/images/upload&banner/PC \353\251\224\354\235\270 \353\260\260\353\204\210_20230302091516857.jpg" differ
diff --git a/images/upload&banner/main_PC_1920x440_20201006040046969.jpg b/images/upload&banner/main_PC_1920x440_20201006040046969.jpg
new file mode 100644
index 00000000..f9915c18
Binary files /dev/null and b/images/upload&banner/main_PC_1920x440_20201006040046969.jpg differ
diff --git "a/images/upload&banner/\353\251\224\354\235\270\355\225\230\353\213\250\353\241\244\353\247\201\353\260\260\353\204\210270X300_20230302091543845.jpg" "b/images/upload&banner/\353\251\224\354\235\270\355\225\230\353\213\250\353\241\244\353\247\201\353\260\260\353\204\210270X300_20230302091543845.jpg"
new file mode 100644
index 00000000..e4e9265f
Binary files /dev/null and "b/images/upload&banner/\353\251\224\354\235\270\355\225\230\353\213\250\353\241\244\353\247\201\353\260\260\353\204\210270X300_20230302091543845.jpg" differ
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..7611f2a7
--- /dev/null
+++ b/index.html
@@ -0,0 +1,394 @@
+<!DOCTYPE html>
+<html lang="ko">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>SUBWAY 써브웨이</title>
+
+  <meta property="og:type" content="website" />
+  <meta property="og:site_name" content="Subway" />
+  <meta property="og:title" content="SUBWAY 써브웨이" />
+  <meta property="og:description" content="신선하고 건강한 글로벌 NO.1 샌드위치 브랜드, 써브웨이" />
+  <meta property="og:image" content="./images/subway_card.png" />
+  <meta property="og:url" content="https://www.subway.co.kr" />
+
+  <meta property="twitter:card" content="summary" />
+  <meta property="twitter:site" content="Subway" />
+  <meta property="twitter:title" content="SUBWAY 써브웨이" />
+  <meta property="twitter:description" content="신선하고 건강한 글로벌 NO.1 샌드위치 브랜드, 써브웨이" />
+  <meta property="twitter:image" content="./images/subway_seo.png" />
+  <meta property="twitter:url" content="https://www.subway.co.kr" />
+
+  <link rel="icon" href="./favicon_s.ico" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.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@400;500;700&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="./css/main.css" />
+
+  <script defer src="./js/main.js"></script>
+</head>
+
+<body>
+
+  <!-- header -->
+  <header>
+    <div class="inner">
+
+      <a href="/" class="logo">
+        <img src="./images/common/logo_w.png" alt="SUBWAY" />
+      </a>
+
+      <div class="sub-menu">
+        <ul class="menu">
+          <li>
+            <a href="javascript:void(0)">로그인</a>
+          </li>
+          <li>
+            <a href="javascript:void(0)">회원가입</a>
+          </li>
+        </ul>
+        <a href="javascript:void(0)" class="language">
+          <img src="./images/common/icon_utill_global.png" alt="Languge" />
+        </a>
+      </div>
+
+      <ul class="main-menu">
+        <li class="item">
+          <div class="item__name">메뉴소개</div>
+          <div class="item__contents">
+            <div class="contents__menu">
+              <ul class="inner">
+                <li>
+                  <h4>샌드위치</h4>
+                  <h4>랩ㆍ기타</h4>
+                  <h4>샐러드</h4>
+                  <h4>아침메뉴</h4>
+                  <h4>스마일 썹</h4>
+                  <h4>단체메뉴</h4>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </li>
+        <li class="item">
+          <div class="item__name">이용방법</div>
+          <div class="item__contents">
+            <div class="contents__menu">
+              <ul class="inner">
+                <li>
+                  <h4>써브웨이 이용방법</h4>
+                  <h4>단체메뉴 이용방법</h4>
+                  <h4>신선한 재료 소개</h4>
+                  <h4>App 이용방법</h4>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </li>
+        <li class="item">
+          <div class="item__name">새소식</div>
+          <div class="item__contents">
+            <div class="contents__menu">
+              <ul class="inner">
+                <li>
+                  <h4>이벤트ㆍ프로모션</h4>
+                  <h4>뉴스ㆍ공지사항</h4>
+                  <h4>광고영상</h4>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </li>
+        <li class="item">
+          <div class="item__name">써브웨이</div>
+          <div class="item__contents">
+            <div class="contents__menu">
+              <ul class="inner">
+                <li>
+                  <h4>써브웨이 역사</h4>
+                  <h4>써브웨이 약속</h4>
+                  <h4>샌드위치 아티스트 지원</h4>
+                  <h4>매장찾기</h4>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </li>
+        <li class="item">
+          <div class="item__name">가맹점</div>
+          <div class="item__contents">
+            <div class="contents__menu">
+              <ul class="inner">
+                <li>
+                  <h4>써브웨이 프랜차이즈</h4>
+                  <h4>가맹관련 FAQ</h4>
+                  <h4>가맹신청ㆍ문의</h4>
+                  <h4>지사안내</h4>
+                  <h4>사업설명회</h4>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </li>
+        <li class="item">
+          <div class="item__name">온라인 주문</div>
+          <div class="item__contents">
+            <div class="contents__menu">
+              <ul class="inner">
+                <li>
+                  <h4>FAST-SUB</h4>
+                  <h4>HOME-SUB</h4>
+                  <h4>단체주문</h4>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </li>
+      </ul>
+
+    </div>
+  </header>
+
+
+  <!-- main -->
+  <main>
+    <!-- visual -->
+    <section class="visual">
+      <div class="inner">
+
+        <div class="title" style="max-width: 100%;">
+          <img src="./images/upload&banner/PC 메인 배너_20230302091516857.jpg" alt="치킨 컬렉션" />
+        </div>
+
+        <!-- btn -->
+        <div class="visual-pager">
+          <div class="visual-pager-item">
+            <a href="javascript:void(0)" class="visual-pager-link__active">1</a>
+          </div>
+          <div class="visual-pager-item">
+            <a href="javascript:void(0)" class="visual-pager-link__still">2</a>
+          </div>
+          <div class="visual-pager-item">
+            <a href="javascript:void(0)" class="visual-pager-link__still">3</a>
+          </div>
+        </div>
+      </div>
+
+      <!-- quick link -->
+      <div class="quick_link">
+        <div class="quick_link_contents">
+          <div class="store">
+            <a href="javascript:void(0)">
+              <strong>
+                매장찾기
+              </strong>
+            </a>
+          </div>
+          <div class="franchise">
+            <a href="javascript:void(0)">
+              <strong>
+                가맹신청ㆍ문의
+              </strong>
+            </a>
+          </div>
+        </div>
+      </div>
+      </div>
+    </section>
+
+    <!-- section subway menu -->
+    <section class="section_subway_menu">
+      <div class="hd">
+        <h2>Subway's Menu</h2>
+
+        <div class="tab">
+          <ul>
+            <li class="active">
+              <a href="javascript:void(0)">클래식</a>
+            </li>
+            <li>
+              <a href="javascript:void(0)">프레쉬&라이트</a>
+            </li>
+            <li>
+              <a href="javascript:void(0)">프리미엄</a>
+            </li>
+            <li>
+              <a href="javascript:void(0)">아침메뉴</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      <!-- subway slider wrapper -->
+      <div class="subway_slider_wrapper">
+        <div class="inner">
+          <div class="control_btn">
+            <a class="bx-prev" href="javascript:void(0)">Prev</a>
+          </div>
+          <div class="classic-wrapper">
+            <img src="./images/menu/sandwich_cl06_01.jpg" alt="Egg Mayo" />
+            <strong class="slider_classic_wrapper_name">
+              에그마요
+            </strong>
+            <p>부드러운 달걀과 고소한 마요네즈가 만나<br>더 부드러운 스테디셀러</p>
+          </div>
+          <div class="classic-wrapper">
+            <img src="./images/menu/sandwich_cl01_01.jpg" alt="Italian B.M.T.™" />
+            <strong class="slider_classic_wrapper_name">
+              이탈리안 비엠티
+            </strong>
+            <p>페퍼로니, 살라미 그리고 햄이 만들어내는 최상의 조화! 전세계가 사랑하는 써브웨이의 베스트셀러! Biggest Meatiest Tastiest, its’ B.M.T!</p>
+          </div>
+          <div class="classic-wrapper">
+            <img src="./images/menu/sandwich_cl02_01.jpg" alt="B.M.T." />
+            <strong class="slider_classic_wrapper_name">
+              비엘티
+            </strong>
+            <p>오리지널 아메리칸 스타일 베이컨의<br>풍미와 바삭함 그대로</p>
+          </div>
+          <div class="classic-wrapper">
+            <img src="./images/menu/sandwich_cl04_01.jpg" alt="Ham" />
+            <strong class="slider_classic_wrapper_name">
+              햄
+            </strong>
+            <p>기본 중에 기본!<br>풍부한 햄이 만들어내는<br>입 안 가득 넘치는 맛의 향연</p>
+          </div>
+          <div class="control_btn">
+            <a class="bx-next" href="javascript:void(0)">Next</a>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- section subway -->
+    <section>
+      <div class="section_subway">
+        <div class="section_subway_inner">
+          <div class="content_top">
+            <div class="utilization">
+              <p>써브웨이를<br>제대로 즐기는 방법!</p>
+              <a class="btn" href="javascript:void(0)"><span>이용방법</span></a>
+            </div>
+      
+            <div class="history">
+              <p>50년 역사를 가진<br>No.1 프랜차이즈의 성장기</p>
+              <a class="btn" href="javascript:void(0)"><span>써브웨이 역사</span></a>
+              <img src="./images/main/img_subway_history.png" />
+            </div>
+          </div>
+      
+          <div class="content_bottom">
+            <div class="whats_new">
+              <div class="hd">
+                <h2>What's New</h2>
+                <p>
+                  써브웨이의 다양한 소식을<br>
+                  빠르게 전달해드립니다.
+                </p>
+              </div>
+              <div class="board_list">
+                <ul>
+                  <li><a href="javascript:void(0)" onclick="view.noticeView(this);return false;" data-idx="286">시스템 안정화를 위한 서버 점검 안내</a></li>
+                  <li><a href="javascript:void(0)" onclick="view.noticeView(this);return false;" data-idx="285">샌드위치 가격 조정 안내</a></li>
+                  <li><a href="javascript:void(0)" onclick="view.noticeView(this);return false;" data-idx="284">써브웨이 고객센터 2023년 설 연휴 휴무 안내</a></li>
+                </ul>
+                <a class="more" href="javascript:void(0)">more</a>
+              </div>
+            </div>
+      
+            <div class="banner_sponsor">
+              <div class="bx-wrapper" style="max-width: 100%;"><div class="bx-viewport" aria-live="polite" style="width: 100%; overflow: hidden; position: relative; height: 300px;">
+                <div class="bxslider" style="width: 1215%; position: relative; transition-duration: 0s; transform: translate3d(-270px, 0px, 0px);">
+                  <div style="float: left; list-style: none; position: relative; width: 270px;" class="bx-clone" aria-hidden="true">
+                    <a href="javascript:void(0)">
+                        <img alt="치킨 컬렉션" src="./images/upload&banner/메인하단롤링배너270X300_20230302091543845.jpg" />
+                      </a>
+                    </div>
+                  <div style="float: left; list-style: none; position: relative; width: 270px;" aria-hidden="false">
+                    <a href="javascript:void(0)">
+                        <img alt="치킨 컬렉션" src="./images/upload&banner/메인하단롤링배너270X300_20230302091543845.jpg" />
+                      </a>
+                    </div>
+                  <div style="float: left; list-style: none; position: relative; width: 270px;" class="bx-clone" aria-hidden="true">    
+                    <a href="javascript:void(0)">
+                      <img alt="치킨 컬렉션" src="./images/upload&banner/메인하단롤링배너270X300_20230302091543845.jpg" />
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>  
+        </div>
+      </div>
+    </section>
+    <section>
+      <div class="quick_menu">
+        <ul>
+          <li class="qm01">
+            <a href="javascript:void(0)">
+              <div class="icon"></div>
+              <strong>프랜차이즈</strong>
+              <span>개설절차/투자비용 정보</span>
+            </a>
+          </li>
+          <li class="qm02">
+            <a href="javascript:void(0)">
+              <div class="icon"></div>
+              <strong>지사안내</strong>
+              <span>수도권/지방 지사정보</span>
+            </a>
+          </li>
+          <li class="qm03">
+            <a href="javascript:void(0)">
+              <div class="icon"></div>
+              <strong>광고영상</strong>
+              <span>TV광고/동영상</span>
+            </a>
+          </li>
+          <li class="qm04">
+            <a href="javascript:void(0)">
+              <div class="icon"></div>
+              <strong>고객문의</strong>
+              <span>자주하는 질문/1:1문의</span>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </section>
+  </main>
+
+
+  <!-- footer -->
+  <footer>
+    <div class="content">
+      <div class="util_menu">
+        <ul class="menu">
+          <li><a href="javascript:void(0)">이용약관</a></li>
+          <li><a href="javascript:void(0)">
+            <strong>개인정보처리방침</strong>
+          </a></li>
+          <li><a href="javascript:void(0)">써브카드</a></li>
+          <li><a href="javascript:void(0)">점주관리자</a></li>
+          <li><a href="javascript:void(0)">Subway Listens</a></li>
+        </ul>
+      </div>
+
+      <div class="info">
+        <span class="addr">서울시 서초구 강남대로 535 프린스빌딩 15층</span>
+        <span class="rep">대표 : INSOO CHO(인수조)</span>
+        <span class="addr">전화 : 02-797-5036</span>
+        <span class="addr">사업자등록번호 : 101-84-04143</span>
+        <p class="copyright">SUBWAY® is a Registered Trademark of Subway IP LLC. © 2021 Subway IP LLC. All Rights Reserved.</p>
+        <div class="sns_area">
+          <a class="sns_area instagram" href="javascript:void(0)">instagram</a>
+          <a class="sns_area fackbook" href="javascript:void(0)">facebook</a>
+        </div>
+      </div>
+    </div>
+  </footer>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 00000000..e69de29b