diff --git a/css/main.css b/css/main.css
new file mode 100644
index 00000000..86d37f5b
--- /dev/null
+++ b/css/main.css
@@ -0,0 +1,598 @@
+/* COMMON */
+body {
+  font-family: 'Nanum Gothic', sans-serif;
+  color: #111;
+}
+a {
+  color: #111;
+  text-decoration: none;
+}
+img {
+  display: block;
+}
+/* 컨텐트 묶음 */
+.content_wrap {
+  width: 1200px;
+  margin: 0 auto;
+}
+/* 부모요소가 자식요소의 높이를 잃어버리지 않도록 */
+.clearfix {
+  overflow: hidden;
+  width: 100%;
+}
+h2.tit_hide {
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+}
+
+/* 헤더 */
+header {
+  width: 100%;
+  height: 80px;
+  position: relative;
+  background: #fff;
+  border-bottom: 1px solid #d9d9d9;
+  box-sizing: border-box;
+  z-index: 9;
+}
+.logo {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 15%;
+  height: 100%;
+  background: #e60012;
+  z-index: 8;
+}
+.logo a {
+  display: block;
+  width: 100%;
+  height: 100%;
+  /* 이미지 반복X, 이미지 중앙 */
+  background: url("/images/logo_nintendo_red.gif") no-repeat center center;
+  /* 왼쪽으로 쭉 이동, 안보이도록 */
+  text-indent: -9999px;
+}
+nav {
+  position: absolute;
+  left: 15%;
+  top: 0;
+  /* 요소의 너비를 뷰포트의 너비에 대한 비율로 85%로 설정,
+     이에 140px + 80px 값을 빼서 요소의 너비를 계산.
+     결과적으로, 요소의 너비는 뷰포트의 너비에 따라 동적으로 조정 */
+  width: calc(85% - (140px + 80px));
+  height: 100%;
+  background: #fff;
+  position: relative;
+  z-index: 8;
+}
+.menu {
+  height: 100%;
+}
+.menu a:hover {
+  color: #e60012;
+}
+/* 카테고리 */
+.category {
+  float: left;
+  height: 100%;
+  width: calc(100% / 5);
+  border-right: 1px solid #d9d9d9;
+  box-sizing: border-box;
+  position: relative;
+}
+.category>a {
+  display: block;
+  height: 100%;
+  line-height: 80px;
+  text-align: center;
+  font-size: 18px;
+}
+.subclass {
+  width: 100%;
+  background: #f7f7f7;
+  border: 1px solid #d9d9d9;
+  box-sizing: border-box;
+  padding: 25px;
+  position: absolute;
+  display: none;
+}
+/* .subclass a {
+  display: block;
+  line-height: 300%;
+  font-size: 15px;
+  letter-spacing: -1px;
+} */
+
+/* 상단 다운로드 버튼 */
+.nav_down_btn {
+  position: absolute;
+  right: 80px;
+  top: 0;
+  width: 140px;
+  height: 100%;
+  z-index: 8;
+}
+.nav_down_btn a {
+  display: block;
+  height: 100%;
+  background: #fe7c0a url("/images/btn_head_eshop.gif") no-repeat center center;
+  text-indent: -9999px;
+}
+/* 상단 검색 버튼 */
+.nav_search_btn {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 80px;
+  height: 100%;
+  border-left: 1px solid #d9d9d9;
+  background: #fff;
+  box-sizing: border-box;
+  cursor: pointer;
+  z-index: 8;
+  text-indent: -9999px;
+}
+.nav_search_btn::before {
+  content: "";
+  position: absolute;
+  display: block;
+  width: 27px;
+  height: 27px;
+  background: url("/images/search.png") no-repeat;
+  margin: 26.5px;
+}
+
+/* ------------------ */
+/* 슬라이더 들어갈 부분 */
+.img_wrap img {
+  width: 100%;
+}
+/* ------------------ */
+
+/* 컨텐트 셀렉션 스타일 */
+.cont_section {
+  margin-top: 100px;
+}
+.cont_box {
+  float: left;
+  width: calc((100% - 96px) / 4);
+  margin-left: 32px;
+  overflow: hidden;
+}
+/* 4배수번째 요소에 적용, 박스 더 추가하는 경우를 대비 */
+.cont_box:nth-child(4n+1) {
+  margin-left: 0;
+}
+.cont_box a {
+  display: block;
+  width: 100%;
+  overflow: hidden;
+  /* position: relative; */
+}
+.cont_box img {
+  transition: .3s;
+  width: 100%;
+}
+/* 스케일 110% */
+.cont_box:hover img {
+  transform: scale(110%);
+}
+/* 큰 글씨 */
+.cont_tit {
+  letter-spacing: -2px;
+  font-size: 26px;
+  position: relative;
+}
+/* 작은 글씨 */
+.sub_tit {
+  font-size: 15px;
+  font-weight: normal;
+  letter-spacing: 0;
+  margin-left: 5px;
+}
+.line_banner {
+  margin-top: 90px;
+}
+.line_banner a {
+  display: block;
+  width: 100%;
+  height: 140px;
+  background: #fe7c0a url("/images/main_banner_eshop.gif") no-repeat center center;
+  text-indent: -9999px;
+}
+.more_btn {
+  width: 16px;
+  height: 16px;
+  background: url("/images/plus_icon.png") no-repeat;
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translate(0, -50%);
+  text-indent: -9999px;
+}
+.cont_list {
+  margin-top: 40px;
+}
+.info {
+  margin-top: 30px;
+}
+.red_tit {
+  font-style: normal;
+  font-size: 15px;
+  color: #e60012;
+  float: left;
+}
+/* DK, DL, 체험판 */
+.type {
+  float: right;
+}
+.type strong {
+  float: left;
+  background: #e60012;
+  color: #fff;
+  font-size: 10px;
+  margin-left: 5px;
+  padding: 1px 6px;
+  border-radius: 4px;
+  letter-spacing: 0;
+  line-height: 14px;
+}
+.type strong:first-child{
+  margin-left: 0;
+}
+.tit {
+  font-size: 18px;
+  line-height: 120%;
+  margin-top: 8px;
+  height: 65px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.detail_info {
+  margin-top: 8px;
+}
+.gray_txt {
+  float: left;
+  color: #505050;
+  font-size: 13px;
+}
+.lang {
+  display: block;
+  width: 59px;
+  height: 36px;
+  float: right;
+  background: url("/images/lang_icon.png") no-repeat;
+  background-size: 59px;
+  background-position: 0 -78px;
+  text-indent: -9999px;
+}
+.m_main {
+  display: none
+}
+/* 버튼 베너, 하단 박스 */
+.bottom_banner {
+  margin-top: 100px;
+}
+.m_banner_list {
+  display: none;
+}
+.banner {
+  float: left;
+  overflow: hidden;
+  margin-left: 3%;
+  width: calc((100% - 6%) / 3);
+}
+/* 3배수번째 요소에 적용 */
+.banner:nth-child(3n+1) {
+  margin-left: 0;
+}
+.banner:nth-child(n+4) {
+  margin-top: 35px;
+}
+.banner a {
+  display: block;
+}
+.banner img {
+  display: block;
+  width: 100%;
+}
+/* down wrap style */
+.down_wrap {
+  margin-top: 80px;
+}
+.down_wrap .cont_tit {
+  text-align: center;
+}
+.down_list {
+  margin-top: 30px;
+  box-sizing: border-box;
+  border: 1px solid #d6d6d6;
+  border-bottom: none;
+}
+.down_btn {
+  float: left;
+  width: 33.33%;
+  height: 120px;
+  background: #fff;
+  text-align: left;
+  display: table;
+  box-sizing: border-box;
+  border-left: 1px solid #d6d6d6;
+  border-bottom: 1px solid #111;
+  transition: all 800ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
+}
+.down_btn:first-child {
+  border-left: none;
+}
+.down_btn a {
+  display: table-cell;
+  vertical-align: middle;
+}
+.btn_txt {
+  position: relative;
+  margin-left: 130px;
+  display: inline-block;
+  font-size: 18px;
+  letter-spacing: -.5px;
+  transition: all 800ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
+}
+.btn_txt::after {
+  content: "";
+  display: block;
+  position: absolute;
+  width: 60px;
+  height: 60px;
+  background: url("/images/unit_icon.png") no-repeat;
+  background-position: 0 -30px;
+  left: -80px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+/* 알려드립니다 */
+.notice_wrap {
+  margin-top: 50px;
+}
+.notice_inner {
+  border-top: 1px solid;
+  border-bottom: 1px solid;
+  border-color: #d6d6d6;
+  padding: 20px 0;
+  letter-spacing: -1px;
+}
+.notice_tit {
+  font-size: 16px;
+  font-weight: normal;
+  line-height: 18px;
+  float: left;
+  width: 18%;
+}
+.notice_more {
+  display: inline-block;
+  text-indent: -9999px;
+  background: url("/images/plus.png") no-repeat center center;
+  width: 18px;
+  height: 18px;
+  border: 1px solid #d6d6d6;
+  margin-left: 10px;
+  border-radius: 3px;
+}
+.notice_list {
+  float: right;
+  width: 80%;
+}
+.notice {
+  float: left;
+  box-sizing: border-box;
+  width: 45%;
+  margin-left: 5%;
+  position: relative;
+}
+.notice:last-child {
+  display: none;
+}
+.notice::after {
+  content: "";
+  display: block;
+  width: 4px;
+  height: 4px;
+  background: #e60012;
+  border-radius: 2px;
+  position: absolute;
+  left: -10px;
+  top: 50%;
+}
+.notice a {
+  width: 100%;
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: #737373;
+}
+.red_line {
+  width: 100%;
+  background: #e60012;
+  padding: 30px 0;
+  margin-top: 100px;
+}
+.bottom_logo {
+  float: left;
+  background: url("/images/bottom_logo.gif");
+  width: 122px;
+  height: 29px;
+  text-indent: -9999px;
+}
+.top {
+  float: right;
+  text-indent: -9999px;
+  width: 25px;
+  height: 25px;
+  border: 4px solid #fff;
+  border-radius: 20px;
+  cursor: pointer;
+  position: relative;
+  transition: .3s;
+  overflow: hidden;
+}
+.top::before {
+  content: "TOP";
+  display: block;
+  color: #fff;
+  position: absolute;
+  left: 10px;
+  top: 0;
+  text-indent: 0;
+  font-style: normal;
+  font-size: 14px;
+  font-weight: bold;
+  letter-spacing: -1px;
+  transition: .3s;
+  display: none;
+  color: #e60012;
+  line-height: 22px;
+}
+.top::after {
+  content: "";
+  display: block;
+  width: 12px;
+  height: 7px;
+  background: url("/images/up_arrow_white.png") no-repeat center center;
+  position: absolute;
+  right: 5px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.top:hover {
+  width: 70px;
+  background: #fff;
+}
+.top:hover::before {
+  display: block;
+}
+/* 카카오, 페이스북... */
+.link_wrap {
+  width: 100%;
+  overflow: hidden;
+  margin: 0 auto;
+  text-align: center;
+  margin-top: 40px;
+}
+.sns_list {
+  display: inline-block;
+  margin-right: 40px;
+}
+.sns {
+  display: inline-block;
+  text-indent: -9999px;
+  width: 60px;
+  height: 60px;
+  margin-right: 20px;
+  background: url("/images/bottom.png") no-repeat;
+}
+.sns:last-child {
+  margin-right: 0;
+}
+/* 하나의 이미지에 있는 아이콘을 위치 값으로 보여주는 방법 */
+.youtube {
+  background-position: 0 -160px;
+}
+.kakao {
+  background-position: -70px -160px;
+}
+.facebook {
+  background-position: -140px -160px;
+}
+.twitter {
+  background-position: -210px -160px;
+}
+.sns a {
+  display: block;
+}
+.amiibo_wrap {
+  display: inline-block;
+}
+.amiibo_wrap p {
+  display: inline-block;
+  text-indent: -9999px;
+  width: 370px;
+  height: 60px;
+}
+.nintendo_btn {
+  margin-right: 20px;
+}
+.amiibo_wrap a {
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: url("/images/bottom_btn.png") no-repeat;
+}
+.amiibo_btn a {
+  background-position: 0 -517px;
+}
+
+/* 버튼메뉴 */
+.bottom_menu {
+  margin-top: 50px;
+}
+.menu_inner {
+  display: table;
+}
+.menu_list {
+  display: table-cell;
+  text-align: center;
+  position: relative;
+}
+.menu_list::before {
+  content: "";
+  position: absolute;
+  width: 50px;
+  height: 3px;
+  background: #e60012;
+  top: -10px;
+  left: 50%;
+  transform: translate(-50%);
+}
+.main_txt {
+  margin-bottom: 13px;
+  font-weight: bold;
+  cursor: default;
+}
+.menu_txt {
+  color: #737373;
+  line-height: 1.5;
+}
+/* 푸터 */
+footer {
+  background: #f5f5f5;
+  color: #737373;
+  font-size: 14px;
+  letter-spacing: -1px;
+  line-height: 24px;
+  padding: 30px 0;
+  margin-top: 40px;
+}
+.foot_menu {
+  float: left;
+  width: 50%;
+}
+.cs_call {
+  float: right;
+  width: 50%;
+  text-align: right;
+}
+.pc_block {
+  display: block;
+  font-size: 12px;
+  margin-top: 12px;
+}
+address {
+  float: left;
+  font-style: normal;
+}
+.foot_info li {
+  float: left;
+  margin-right: 20px;
+}
\ No newline at end of file
diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 00000000..393cccc8
Binary files /dev/null and b/favicon.ico differ
diff --git a/favicon.png b/favicon.png
new file mode 100644
index 00000000..393cccc8
Binary files /dev/null and b/favicon.png differ
diff --git a/images/.DS_Store b/images/.DS_Store
new file mode 100644
index 00000000..f7d38c3e
Binary files /dev/null and b/images/.DS_Store differ
diff --git a/images/1-1.jpeg b/images/1-1.jpeg
new file mode 100644
index 00000000..98992081
Binary files /dev/null and b/images/1-1.jpeg differ
diff --git a/images/1-2.jpeg b/images/1-2.jpeg
new file mode 100644
index 00000000..1769906e
Binary files /dev/null and b/images/1-2.jpeg differ
diff --git a/images/1-3.jpeg b/images/1-3.jpeg
new file mode 100644
index 00000000..b953640c
Binary files /dev/null and b/images/1-3.jpeg differ
diff --git a/images/1-4.jpeg b/images/1-4.jpeg
new file mode 100644
index 00000000..e762c9dd
Binary files /dev/null and b/images/1-4.jpeg differ
diff --git a/images/1-5.jpeg b/images/1-5.jpeg
new file mode 100644
index 00000000..faee0cd4
Binary files /dev/null and b/images/1-5.jpeg differ
diff --git a/images/1-6.jpeg b/images/1-6.jpeg
new file mode 100644
index 00000000..5f4dd2c6
Binary files /dev/null and b/images/1-6.jpeg differ
diff --git a/images/1-7.jpeg b/images/1-7.jpeg
new file mode 100644
index 00000000..e735fe8d
Binary files /dev/null and b/images/1-7.jpeg differ
diff --git a/images/1-8.jpeg b/images/1-8.jpeg
new file mode 100644
index 00000000..69a082ad
Binary files /dev/null and b/images/1-8.jpeg differ
diff --git a/images/2-1.jpeg b/images/2-1.jpeg
new file mode 100644
index 00000000..bb609d36
Binary files /dev/null and b/images/2-1.jpeg differ
diff --git a/images/2-2.png b/images/2-2.png
new file mode 100644
index 00000000..111903b3
Binary files /dev/null and b/images/2-2.png differ
diff --git a/images/2-3.jpeg b/images/2-3.jpeg
new file mode 100644
index 00000000..fe347381
Binary files /dev/null and b/images/2-3.jpeg differ
diff --git a/images/2-4.jpeg b/images/2-4.jpeg
new file mode 100644
index 00000000..ca1af543
Binary files /dev/null and b/images/2-4.jpeg differ
diff --git a/images/Nintendo_logo.png b/images/Nintendo_logo.png
new file mode 100644
index 00000000..026aa4e8
Binary files /dev/null and b/images/Nintendo_logo.png differ
diff --git a/images/banner_1.png b/images/banner_1.png
new file mode 100644
index 00000000..72d15c22
Binary files /dev/null and b/images/banner_1.png differ
diff --git a/images/banner_2.jpeg b/images/banner_2.jpeg
new file mode 100644
index 00000000..475e08a7
Binary files /dev/null and b/images/banner_2.jpeg differ
diff --git a/images/banner_3.jpeg b/images/banner_3.jpeg
new file mode 100644
index 00000000..2e59bfb5
Binary files /dev/null and b/images/banner_3.jpeg differ
diff --git a/images/banner_arrow.png b/images/banner_arrow.png
new file mode 100644
index 00000000..3f26b055
Binary files /dev/null and b/images/banner_arrow.png differ
diff --git a/images/banner_main_bottom01.jpg b/images/banner_main_bottom01.jpg
new file mode 100644
index 00000000..00e0f74a
Binary files /dev/null and b/images/banner_main_bottom01.jpg differ
diff --git a/images/banner_main_bottom02.jpg b/images/banner_main_bottom02.jpg
new file mode 100644
index 00000000..da114bbc
Binary files /dev/null and b/images/banner_main_bottom02.jpg differ
diff --git a/images/banner_main_bottom03.jpg b/images/banner_main_bottom03.jpg
new file mode 100644
index 00000000..64f50e08
Binary files /dev/null and b/images/banner_main_bottom03.jpg differ
diff --git a/images/banner_main_bottom04.jpg b/images/banner_main_bottom04.jpg
new file mode 100644
index 00000000..6838e9f3
Binary files /dev/null and b/images/banner_main_bottom04.jpg differ
diff --git a/images/banner_main_bottom05.jpg b/images/banner_main_bottom05.jpg
new file mode 100644
index 00000000..b502a01d
Binary files /dev/null and b/images/banner_main_bottom05.jpg differ
diff --git a/images/banner_main_bottom06.jpg b/images/banner_main_bottom06.jpg
new file mode 100644
index 00000000..a9bbaee7
Binary files /dev/null and b/images/banner_main_bottom06.jpg differ
diff --git a/images/bottom.png b/images/bottom.png
new file mode 100644
index 00000000..48b20329
Binary files /dev/null and b/images/bottom.png differ
diff --git a/images/bottom_btn.png b/images/bottom_btn.png
new file mode 100644
index 00000000..e1e850fb
Binary files /dev/null and b/images/bottom_btn.png differ
diff --git a/images/bottom_logo.gif b/images/bottom_logo.gif
new file mode 100644
index 00000000..428461fa
Binary files /dev/null and b/images/bottom_logo.gif differ
diff --git a/images/btn_footer_amiibo.png b/images/btn_footer_amiibo.png
new file mode 100644
index 00000000..237658ad
Binary files /dev/null and b/images/btn_footer_amiibo.png differ
diff --git a/images/btn_head_eshop.gif b/images/btn_head_eshop.gif
new file mode 100644
index 00000000..32099d71
Binary files /dev/null and b/images/btn_head_eshop.gif differ
diff --git a/images/ico_close_searchBox.gif b/images/ico_close_searchBox.gif
new file mode 100644
index 00000000..b913eed9
Binary files /dev/null and b/images/ico_close_searchBox.gif differ
diff --git a/images/lang_icon.png b/images/lang_icon.png
new file mode 100644
index 00000000..b2ec9837
Binary files /dev/null and b/images/lang_icon.png differ
diff --git a/images/logo_nintendo_red.gif b/images/logo_nintendo_red.gif
new file mode 100644
index 00000000..428461fa
Binary files /dev/null and b/images/logo_nintendo_red.gif differ
diff --git a/images/main_banner_eshop.gif b/images/main_banner_eshop.gif
new file mode 100644
index 00000000..ec3a15c2
Binary files /dev/null and b/images/main_banner_eshop.gif differ
diff --git a/images/nintendo.png b/images/nintendo.png
new file mode 100644
index 00000000..c39503d5
Binary files /dev/null and b/images/nintendo.png differ
diff --git a/images/plus.png b/images/plus.png
new file mode 100644
index 00000000..6a919fb9
Binary files /dev/null and b/images/plus.png differ
diff --git a/images/plus_icon.png b/images/plus_icon.png
new file mode 100644
index 00000000..b31cf922
Binary files /dev/null and b/images/plus_icon.png differ
diff --git a/images/search.png b/images/search.png
new file mode 100644
index 00000000..0e43b98e
Binary files /dev/null and b/images/search.png differ
diff --git a/images/slide_arrow.png b/images/slide_arrow.png
new file mode 100644
index 00000000..4101c709
Binary files /dev/null and b/images/slide_arrow.png differ
diff --git a/images/unit_icon.png b/images/unit_icon.png
new file mode 100644
index 00000000..96346283
Binary files /dev/null and b/images/unit_icon.png differ
diff --git a/images/up_arrow_white.png b/images/up_arrow_white.png
new file mode 100644
index 00000000..547f942c
Binary files /dev/null and b/images/up_arrow_white.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..72ee647b
--- /dev/null
+++ b/index.html
@@ -0,0 +1,398 @@
+<!DOCTYPE html>
+<html lang="ko">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Nintendo</title>
+  <link rel="shortcut icon" href="/favicon.png">
+  <!-- 브라우저에서 제공하는 기본적인 스타일 초기화(리셋) 시키기 -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css" />
+
+  <!-- google fonts -->
+  <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=Nanum+Gothic:wght@400;700&display=swap" rel="stylesheet" />
+  <!-- google icons -->
+  <link rel="stylesheet"
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
+  <!-- main.css를 연결해주기 -->
+  <link rel="stylesheet" href="./css/main.css" />
+  <!-- js 연결 -->
+  <!-- <script defer src="./js/main.js"></script> -->
+  <!-- <script type="module" defer src="./js/main.js"></script> -->
+</head>
+
+<body>
+  <div id="wrap">
+    <!-- HEADER -->
+    <header>
+      <!-- <a href="/" class="logo">
+        <img src="./images/nintendo.png" alt="Nintendo">
+      </a> -->
+      <h1 class="logo">
+        <a href="/">Nintendo</a>
+      </h1>
+      <nav>
+        <ul class="menu">
+          <!-- 메뉴의 카테고리 -->
+          <li class="category"><a href="javascript:void(0)">Nintendo Switch</a>
+            <ul class="subclass">
+              <li>Nintendo Switch OLED 모델</li>
+              <li>Nintendo Switch</li>
+              <li>Nintendo Switch Lite</li>
+              <li>기능ㆍ특징을 비교</li>
+              <li>주변기기</li>
+              <li>Nintendo Switch Online</li>
+              <li>Nintendo 지킴이 Switch™</li>
+              <li>닌텐도 e숍</li>
+            </ul>
+          </li>
+          <li class="category"><a href="javascript:void(0)">소프트웨어</a>
+            <ul class="subclass">
+              <li>Nintendo Switch 소프트웨어</li>
+              <li>닌텐도 3DS 소프트웨어</li>
+              <li>발매 예정 소프트웨어</li>
+              <li>스마트폰용 앱</li>
+            </ul>
+          </li>
+          <li class="category"><a href="javascript:void(0)">캐릭터</a>
+            <ul class="subclass">
+              <li>스플래툰 베이스 홈페이지</li>
+              <li>별의 커비 공식 홈페이지</li>
+            </ul>
+          </li>
+          <li class="category"><a href="javascript:void(0)">고객지원</a>
+            <ul class="subclass">
+              <li>Nintendo Switch 고객지원</li>
+              <li>Nintendo Switch Online 서포트</li>
+              <li>닌텐도 3DS 고객지원</li>
+              <li>고객지원 홈페이지</li>
+              <li>네트워크 장애 발생 상황</li>
+            </ul>
+          </li>
+          <li class="category"><a href="javascript:void(0)">News</a>
+            <ul class="subclass">
+              <li>News</li>
+              <li>보도자료</li>
+              <li>알림</li>
+              <li>이벤트</li>
+            </ul>
+          </li>
+        </ul>
+      </nav>
+      <div class="nav_down_btn"><a href="javascript:void(0)">다운로드 구입</a></div>
+      <div class="nav_search_btn">검색</div>
+    </header>
+    <!-- 슬라이드 -->
+    <div class="slide">
+      <div class="img_wrap">
+        <div class="slide_img">
+          <a href="javascript:void(0)">
+            <img src="/images/banner_1.png" alt="젤다의 전설 티어스 오브 더 킹덤" class="pc_slide">
+          </a>
+        </div>
+        <!-- <div class="slide_img">
+          <a href="javascript:void(0)">
+            <img src="/images/banner_2.jpeg" alt="젤다의 전설 티어스 오브 더 킹덤 에디션, 4월28일(금) 발매 결정" class="pc_slide">
+          </a>
+        </div>
+        <div class="slide_img">
+          <a href="javascript:void(0)">
+            <img src="/images/banner_3.jpeg" alt="닌텐도 스위치 스포츠" class="pc_slide">
+          </a>
+        </div> -->
+      </div>
+    </div>
+
+    <!-- 새롭게 알려드립니다 시작 -->
+    <div class="content">
+      <section class="new cont_section">
+        <div class="content_wrap">
+          <h2 class="cont_tit">
+            새롭게 알려 드립니다
+            <div class="sub_tit">News & Update</div>
+            <a href="javascript:void(0)" class="more_btn">더 보기</a>
+          </h2>
+          <!-- 부모요소가 자식요소의 높이를 잃어버리지 않도록 -->
+          <ul class="cont_list clearfix">
+            <li class="cont_box"><a href="javascript:void(0)"><img src="/images/1-1.jpeg" alt=""></a>
+              <div class="info">
+                <div class="top_text clearfix">
+                  <div class="red_tit">보도자료</div>
+                </div>
+                <h3 class="tit">Nintendo Switch와 「Nintendo Switch Sports」가 함께 들어 있는 세트 발매. 무료 특전으로 「Nintendo Switch Online 개인</h3>
+                <div class="detail_info clearfix">
+                  <div class="gray_txt">
+                    <div class="date">2023.04.03</div>
+                    <div class="console">Nintendo Switch</div>
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li class="cont_box"><a href="javascript:void(0)"><img src="/images/1-2.jpeg" alt=""></a>
+              <div class="info">
+                <div class="top_text clearfix">
+                  <div class="red_tit">뉴스</div>
+                </div>
+                <h3 class="tit">『젤다의 전설 브레스 오브 더 와일드』 당신이 모르는 하이랄 라넬 지방이 공개되었습니다.</h3>
+                <div class="detail_info clearfix">
+                  <div class="gray_txt">
+                    <div class="date">2023.03.30</div>
+                    <div class="console">Nintendo Switch</div>
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li class="cont_box"><a href="javascript:void(0)"><img src="/images/1-3.jpeg" alt=""></a>
+              <div class="info">
+                <div class="top_text clearfix">
+                  <div class="red_tit">뉴스</div>
+                </div>
+                <h3 class="tit">Nintendo Switch 소프트웨어 특집 「한국 개발사에서 제작한 소프트웨어」 추천</h3>
+                <div class="detail_info clearfix">
+                  <div class="gray_txt">
+                    <div class="date">2023.03.30</div>
+                    <div class="console">Nintendo Switch</div>
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li class="cont_box"><a href="javascript:void(0)"><img src="/images/1-4.jpeg" alt=""></a>
+              <div class="info">
+                <div class="top_text clearfix">
+                  <div class="red_tit">뉴스</div>
+                </div>
+                <h3 class="tit">『젤다의 전설 티어스 오브 더 킹덤』을 프로듀서 아오누마 에이지가 플레이하는 최신 영상 공개 중!</h3>
+                <div class="detail_info clearfix">
+                  <div class="gray_txt">
+                    <div class="date">2023.03.29</div>
+                    <div class="console">Nintendo Switch</div>
+                  </div>
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </section>
+
+      <!-- 중간 오렌지 박스 -->
+      <div class="line_banner"><a href="javascript:void(0)">닌텐도 선불 번호 구입</a></div>
+
+      <section class="main cont_section">
+        <div class="content_wrap">
+          <div class="pc_main">
+            <h2 class="cont_tit">
+              주요 소프트웨어
+              <div class="sub_tit">Game Title</div>
+              <a href="javascript:void(0)" class="more_btn">더 보기</a>
+            </h2>
+            <ul class="cont_list clearfix">
+              <li class="cont_box"><a href="javascript:void(0)"><img src="./images/2-1.jpeg" alt=""></a>
+                <div class="info">
+                  <div class="top_text clearfix">
+                    <div class="red_tit">Nintendo Switch</div>
+                    <div class="type">
+                      <strong class="type_icon">PK</strong>
+                      <strong class="type_icon">DL</strong>
+                      <strong class="type_icon">체험판</strong>
+                    </div>
+                  </div>
+                  <h3 class="tit">별의 커비 Wii 디럭스</h3>
+                  <div class="detail_info clearfix">
+                    <div class="gray_txt">
+                      <div class="date">2023.02.24</div>
+                      <div class="console">한국닌텐도</div>
+                    </div>
+                    <div class="lang">한국어 대응</div>
+                  </div>
+                </div>
+              </li>
+              <li class="cont_box"><a href="javascript:void(0)"><img src="./images/2-2.png" alt=""></a>
+                <div class="info">
+                  <div class="top_text clearfix">
+                    <div class="red_tit">Nintendo Switch</div>
+                    <div class="type">
+                      <strong class="type_icon">PK</strong>
+                      <strong class="type_icon">DL</strong>
+                    </div>
+                  </div>
+                  <h3 class="tit">파이어 엠블렘 Engage</h3>
+                  <div class="detail_info clearfix">
+                    <div class="gray_txt">
+                      <div class="date">2023.01.20</div>
+                      <div class="console">한국닌텐도</div>
+                    </div>
+                    <div class="lang">한국어 대응</div>
+                  </div>
+                </div>
+              </li>
+              <li class="cont_box"><a href="javascript:void(0)"><img src="./images/2-3.jpeg" alt=""></a>
+                <div class="info">
+                  <div class="top_text clearfix">
+                    <div class="red_tit">Nintendo Switch</div>
+                    <div class="type">
+                      <strong class="type_icon">PK</strong>
+                      <strong class="type_icon">DL</strong>
+                    </div>
+                  </div>
+                  <h3 class="tit">포켓몬스터스칼렛・바이올렛</h3>
+                  <div class="detail_info clearfix">
+                    <div class="gray_txt">
+                      <div class="date">2022.11.18</div>
+                      <div class="console">한국닌텐도</div>
+                    </div>
+                    <div class="lang">한국어 대응</div>
+                  </div>
+                </div>
+              </li>
+              <li class="cont_box"><a href="javascript:void(0)"><img src="./images/2-4.jpeg" alt=""></a>
+                <div class="info">
+                  <div class="top_text clearfix">
+                    <div class="red_tit">Nintendo Switch</div>
+                    <div class="type">
+                      <strong class="type_icon">PK</strong>
+                      <strong class="type_icon">DL</strong>
+                    </div>
+                  </div>
+                  <h3 class="tit">스플래툰 3</h3>
+                  <div class="detail_info clearfix">
+                    <div class="gray_txt">
+                      <div class="date">2022.09.09</div>
+                      <div class="console">한국닌텐도</div>
+                    </div>
+                    <div class="lang">한국어 대응</div>
+                  </div>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        <section class="bottom_banner">
+          <div class="content_wrap bottom_content_wrap">
+            <h2 class="tit_hide">배너존</h2>
+            <ul class="banner_list clearfix">
+              <li class="banner"><a href="javascript:void(0)"><img src="./images/banner_main_bottom01.jpg" alt=""></a></li>
+              <li class="banner"><a href="javascript:void(0)"><img src="./images/banner_main_bottom02.jpg" alt=""></a></li>
+              <li class="banner"><a href="javascript:void(0)"><img src="./images/banner_main_bottom03.jpg" alt=""></a></li>
+              <li class="banner"><a href="javascript:void(0)"><img src="./images/banner_main_bottom04.jpg" alt=""></a></li>
+              <li class="banner"><a href="javascript:void(0)"><img src="./images/banner_main_bottom05.jpg" alt=""></a></li>
+              <li class="banner"><a href="javascript:void(0)"><img src="./images/banner_main_bottom06.jpg" alt=""></a></li>
+            </ul>
+          </div>
+        </section>
+        <div class="down_wrap">
+          <div class="content_wrap bottom_content_wrap">
+            <h2 class="cont_tit">쉽고 간편한 다운로드 버전으로도 <div class="tit_block">즐길 수 있습니다.</div></h2>
+            <ul class="down_list clearfix">
+              <li class="down_btn"><a href="javascript:void(0)"><div class="btn_txt">다운로드 구입하기<img src="./images/banner_arrow.png"
+                      alt=""></div></a></li>
+              <li class="down_btn"><a href="javascript:void(0)"><div class="btn_txt">Nintendo Switch / 닌텐도 3DS<br>닌텐도 선불 카드
+                    안내<img src="./images/banner_arrow.png" alt=""></div></a></li>
+              <li class="down_btn"><a href="javascript:void(0)"><div class="btn_txt">Nintendo Switch<br>닌텐도 선불 번호 구입하기<img
+                      src="./images/banner_arrow.png" alt=""></div></a></li>
+            </ul>
+          </div>
+        </div>
+        <section class="notice_wrap">
+          <div class="content_wrap bottom_content_wrap">
+            <div class="notice_inner clearfix">
+              <h2 class="notice_tit">알려 드립니다<a href="javascript:void(0)" class="notice_more">더 보기</a></h2>
+              <ul class="notice_list clearfix">
+                <li class="notice"><a href="javascript:void(0)">닌텐도 3DS 시리즈 「닌텐도 e숍」 서비스 종료에 따른 「포켓몬 뱅크」 서비스 무료화에 대한 안내 (2023년 3월 28일
+                    갱신)</a></li>
+                <li class="notice"><a href="javascript:void(0)">닌텐도 3DS 시리즈의 「닌텐도 e숍」 서비스 종료에 따른 사용하지 않은 잔액의 환불에 관한 안내 </a>
+                </li>
+                <li class="notice"><a href="javascript:void(0)">닌텐도 3DS 시리즈의 「닌텐도 e숍」 서비스 종료 시기에 관한 안내</a></li>
+              </ul>
+            </div>
+          </div>
+        </section>
+        <div class="bottom_wrap">
+          <div class="red_line">
+            <div class="content_wrap bottom_content_wrap">
+              <div class="red_inner clearfix">
+                <div class="bottom_logo">Nintendo</div>
+                <div class="top">최상단으로 이동</div>
+              </div>
+            </div>
+          </div>
+          <div class="link_wrap">
+            <ul class="sns_list">
+              <li class="sns youtube"><a href="javascript:void(0)">유튜브</a></li>
+              <li class="sns kakao"><a href="javascript:void(0)">카카오스토리</a></li>
+              <li class="sns facebook"><a href="javascript:void(0)">페이스북</a></li>
+              <li class="sns twitter"><a href="javascript:void(0)">트위터</a></li>
+            </ul>
+            <div class="amiibo_wrap">
+              <div class="nintendo_btn"><a href="javascript:void(0)">My Nintendo</a></div>
+              <div class="amiibo_btn"><a href="javascript:void(0)">amiibo</a></div>
+            </div>
+          </div>
+
+          <section class="bottom_menu">
+            <div class="content_wrap m_content_wrap">
+              <div class="menu_inner clearfix">
+                <h2 class="tit_hide">닌텐도 메뉴</h2>
+                <ul class="menu_list">
+                  <li class="main_txt">한국닌텐도</li>
+                  <li class="menu_txt"><a href="javascript:void(0)">- 회사개요</a></li>
+                  <li class="menu_txt"><a href="javascript:void(0)">- 찾아오시는 길</a></li>
+                </ul>
+                <ul class="menu_list">
+                  <li class="main_txt">본체 / amiibo</li>
+                  <li class="menu_txt"><a href="javascript:void(0)">- Nintendo Switch</a></li>
+                  <li class="menu_txt"><a href="javascript:void(0)">- New 닌텐도 3DS XL</a></li>
+                  <li class="menu_txt"><a href="javascript:void(0)">- New 닌텐도 2DS XL</a></li>
+                  <li class="menu_txt"><a href="javascript:void(0)">- amiibo</a></li>
+                </ul>
+                <ul class="menu_list">
+                  <li class="main_txt">소프트웨어</li>
+                  <li class="menu_txt"><a href="javascript:void(0)">- Nintendo Switch 소프트웨어</a></li>
+                  <li class="menu_txt"><a href="javascript:void(0)">- 닌텐도 3DS 소프트웨어</a></li>
+                  <li class="menu_txt"><a href="javascript:void(0)">- 발매 예정 소프트웨어</a></li>
+                  <li class="menu_txt"><a href="javascript:void(0)">- 스마트폰용 앱</a></li>
+                </ul>
+                <ul class="menu_list">
+                  <li class="main_txt">고객지원</li>
+                  <li class="menu_txt"><a href="javascript:void(0)">- Nintendo Switch</a></li>
+                  <li class="menu_txt"><a href="javascript:void(0)">- 닌텐도 3DS</a></li>
+                  <li class="menu_txt"><a href="javascript:void(0)">- 고객지원 홈페이지</a></li>
+                </ul>
+              </div>
+            </div>
+          </section>
+        </div>
+    </div>
+
+    <footer>
+      <div class="content_wrap bottom_content_wrap">
+        <div class="foot_inner clearfix">
+          <div class="foot_menu">
+            <a href="javascript:void(0)">이용약관 | </a>
+            <a href="javascript:void(0)">개인정보취급방침</a>
+          </div>
+          <div class="cs_call">
+            고객지원 문의전화 : 1670-9900
+            <div class="m_block">(평일 오전 9시 30분~오후 5시 30분)</div>
+            <div class="pc_block">※ 토/일/공휴일/회사 정기휴일 및 특별휴일 제외</div>
+          </div>
+          <address>
+            ⓒ 2006 Nintendo of Korea Co., Ltd. All Rights Reserved.
+            <ul class="foot_info clearfix">
+              <li>상호명 : 한국닌텐도주식회사</li>
+              <li>대표자명 : 미우라 타카히로</li>
+              <li>사업자등록번호 : 120-87-03578</li>
+            </ul>
+          </address>
+        </div>
+      </div>
+    </footer>
+
+  </div>
+
+</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