diff --git a/README.md b/README.md
index 598dc30f..0733f390 100644
--- a/README.md
+++ b/README.md
@@ -1,45 +1,27 @@
-# 👀 자신이 원하는 사이트 레이아웃 클론
+# 메가박스 클론코딩
 
-원하는 사이트(페이지)를 자유롭게 선택하고 레이아웃을 클론 코딩하세요.  
-평소에 도전해 보고 싶었거나 혹은 자신의 수준에 맞는 사이트(페이지)를 선택하세요.   
-과제 수행 및 리뷰 기간은 별도 공지를 참고하세요!
+### 메가박스 홈페이지 링크
 
-## 과제 수행 및 제출 방법
+https://www.megabox.co.kr/
 
-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`)
+### 클론 메가박스 서비스 링크
 
-- `main` 혹은 다른 사람의 브랜치로 절대 병합하지 않도록 주의하세요!
-- Pull Request에서 보이는 설명을 다른 사람들이 이해하기 쉽도록 꼼꼼하게 작성하세요!
-- Pull Request에서 과제 제출 후 절대 병합(Merge)하지 않도록 주의하세요!
-- 과제 수행 및 제출 과정에서 문제가 발생한 경우, 바로 담당 멘토나 강사에서 얘기하세요!
+https://kdt5-chadongmin--kdt5-cdm-megaboxclone.netlify.app/
 
-## 필수 요구사항
+## 과제 진행 내용
 
-- [ ] 과제에 대한 설명을 포함한 `README.md` 파일을 제공하세요!
-- [ ] 과제 결과와 비교할 수 있는 실제 사이트(페이지)의 주소를 명시하세요!
-- [ ] 과정에서 사용한 프로젝트 폴더/파일이 모두 포함돼야 합니다, 일부 파일만 제출하지 마세요! 
-- [ ] 실제 서비스로 배포하고 접근 가능한 링크를 추가해야 합니다.
+- [ ] 메가박스 공식 홈페이지 내의 상단 메뉴바, 중앙 박스오피스 영역, 최하단 footer 영역의 클론코딩
+- [ ] 다른 페이지로 이동하는 링크를 제외하고 다른 기능은 가능한 한 최대한 구현
+- [ ] 원본 페이지의 코드를 최대한 배제하고 눈에 보이는대로 스스로 코딩
 
-## 선택 요구사항
+## 부족한 사항
 
-- [ ] `<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. 다운로드!
+- [ ] 드롭다운 동작시 inner 영역에 맞게 가로 너비가 잘려버리는 문제
+- [ ] 네비게이션 바 하단 메뉴에 hover 했을때 나오는 하위메뉴가 우측으로 밀려서 정렬되는 문제
+- [ ] 브라우저 창 크기를 축소시켜 x축 스크롤 바가 생겼을 때, 스크롤시 background가 잘리는 문제
+- [ ] 다른 드롭다운을 닫을 때 쓰는 JS 코드가 지저분한 점
+- [ ] 마우스 아이콘의 반복적인 애니메이션의 부자연스러움
+- [ ] semantic 태그의 활용이 많이 부족한 점
+- [ ] 과제 초기부터 commit을 남기면서 작업하지 않은 점
+- [ ] class 사용에 있어 규칙이 다소 난잡하고 일관되지 않은 점
+- [ ] border-sizing : border-box 로 레이아웃 밀림을 초기에 방지하지 못한 점
diff --git a/css/footer.css b/css/footer.css
new file mode 100644
index 00000000..6fe5b590
--- /dev/null
+++ b/css/footer.css
@@ -0,0 +1,106 @@
+footer {
+  height: 200px;
+  background-color: #f8f8fa;
+}
+
+.flex-space {
+flex-grow: 1;
+}
+
+/* TOP */
+footer .inner {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+footer .footer__top {
+  height: 20%;
+  padding: 20px 0;
+  display: flex;
+}
+
+footer .footer__top ul {
+  display: flex;
+  align-items: center;
+}
+
+footer .footer__top ul li {
+  margin-right: 10px;
+  font-size: 12px;
+}
+
+footer .footer__top ul li:hover {
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+footer .footer__top ul li:nth-child(7) {
+  font-weight: 800;
+}
+
+footer .footer__top button {
+  font-size: 14px;
+  color: #333;
+  display: flex;
+  align-items: center;
+  padding: 3px 20px;
+  border: 1.5px solid rgba(0, 0, 0, 0.3);
+  border-radius: 20px;
+}
+
+footer .footer__top button span:first-child {
+  font-size: 20px;
+}
+
+/* BOTTOM */
+footer .footer__bot {
+  height: 80%;
+  display: flex;
+  padding-top: 20px;
+}
+
+footer .footer__bot div:first-child {
+  height: 50px;
+  width: 150px;
+  background-image: url(../images/logo-opacity_new2.png);
+  margin-right: 15px;
+}
+
+footer .footer__bot ul {
+  font-size: 14px;
+  display: flex;
+  flex-direction: column;
+}
+
+footer .footer__bot ul li {
+  padding-bottom: 7px;
+}
+
+footer .footer__bot div:last-child {
+  display: flex;
+}
+
+footer .footer__bot div:last-child i {
+  height: 30px;
+  width: 30px;
+  margin-left: 7px;
+}
+
+footer .footer__bot div:last-child i:hover {
+  cursor: pointer;
+}
+
+footer .footer__bot div:last-child i:nth-child(1) {
+  background-image: url(../images/ico-youtubeN.png);
+}
+footer .footer__bot div:last-child i:nth-child(2) {
+  background-image: url(../images/ico-instagramN.png);
+}
+footer .footer__bot div:last-child i:nth-child(3) {
+  background-image: url(../images/ico-facebookN.png);
+}
+footer .footer__bot div:last-child i:nth-child(4) {
+  background-image: url(../images/ico-twitterN.png);
+}
\ No newline at end of file
diff --git a/css/information.css b/css/information.css
new file mode 100644
index 00000000..86a24e05
--- /dev/null
+++ b/css/information.css
@@ -0,0 +1,173 @@
+aside {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.banner--moved {
+  transform: translateX(-185px);
+}
+
+.info__title {
+  display: flex;
+  height: 100px;
+  align-items: center;
+  font-size: 27px;
+  font-weight: 540;
+  color: #252451;
+}
+
+.info__banner {
+  width: 1300px;
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+}
+
+.info__banner button {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  margin: auto 0;
+}
+
+.info__banner button:first-child {
+  left: 50px;
+}
+
+.info__banner ul + button {
+  right: 50px; 
+}
+
+.info__banner ul {
+  box-sizing: border-box;
+  overflow: hidden;
+  display: flex;
+}
+
+.info__banner ul li {
+  width: 170px;
+  height: 170px;
+  flex-shrink: 0;
+  border-radius: 15px;
+  background-repeat: no-repeat;
+  background-size: cover;
+  margin-right: 16px;
+  transition: transform .3s ease-in-out;
+}
+
+.info__banner ul li:hover {
+  cursor: pointer;
+  background-position-y: -170px;
+}
+
+.info__banner ul li:nth-child(1) {
+  background-image: url(../images/bg-main-megainfo-dolby.png);
+}
+.info__banner ul li:nth-child(2) {
+  background-image: url(../images/bg-main-megainfo-private.png) ;
+}
+.info__banner ul li:nth-child(3) {
+  background-image: url(../images/bg-main-megainfo-boutique.png) ;
+}
+.info__banner ul li:nth-child(4) {
+  background-image: url(../images/bg-main-megainfo-mx.png) ;
+}
+.info__banner ul li:nth-child(5) {
+  background-image: url(../images/bg-main-megainfo-comfort.png) ;
+}
+.info__banner ul li:nth-child(6) {
+  background-image: url(../images/bg-main-megainfo-puppy.jpg) ;
+}
+.info__banner ul li:nth-child(7) {
+  background-image: url(../images/bg-main-megainfo-kids.png) ;
+  margin-right: 0;
+}
+
+.info__text {
+  width: 100%;
+  height: 150px;
+  display: flex;
+  align-items: center;
+  font-size: 15px;
+}
+
+.info__text > div {
+  width: 100%;
+  border-top: .5px solid rgba(0, 0, 0, 0.2);
+  border-bottom: .5px solid rgba(0, 0, 0, 0.2);
+  padding: 20px;
+}
+
+.info__text .inner {
+  display: flex;
+  justify-content: space-between;
+}
+
+.info__text .inner > span:first-child {
+  margin-right: 40px
+}
+
+.info__text .inner .text__center {
+  display: flex;
+  flex-grow: 1;
+  justify-content: space-between;
+  margin: 0 15px;
+}
+
+.info__text .inner .text__center div:hover {
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.info__text .inner .text__center div span:first-child {
+  font-weight: 600;
+  color: #252451;
+}
+
+.info__text .inner .text__center > span {
+  color: rgba(0, 0, 0, 0.5);
+}
+
+.info__text .inner div:last-child {
+  margin-left: 20px;
+}
+
+.info__text .inner div:last-child:hover span:first-child{
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.info__text .inner div:last-child span:last-child {
+  font-size: 14px;
+}
+
+.info__icon {
+  height: 400px;
+}
+
+.info__icon .inner {
+  display: flex;
+  justify-content: space-between;
+}
+
+.info__icon .inner div {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  font-size: 14px;
+}
+
+.info__icon .inner div:hover {
+  cursor: pointer;
+}
+
+.info__icon .inner div img {
+  margin: 15px 35px;
+}
+
+.info__icon .inner div:hover span {
+  text-decoration: underline;
+}
\ No newline at end of file
diff --git a/css/main.css b/css/main.css
new file mode 100644
index 00000000..6a2846d6
--- /dev/null
+++ b/css/main.css
@@ -0,0 +1,309 @@
+/* COMMON */
+body {
+  font-family:Arial, Helvetica, sans-serif;
+}
+
+main {
+  height: 940px;
+  width: 100%;
+}
+
+.main__bg {
+  height: 800px;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: -1;
+}
+
+.main__bg .bg-image {
+  width: 100%;
+  height: 100%;
+  background-image: url(../images/background2.jpg);
+  background-repeat: no-repeat;
+  background-size: cover;
+  filter: blur(30px);
+}
+
+/* 버튼 기본속성 초기화 */
+button {
+ background: none ;
+ border:none;
+ box-shadow:none;
+ border-radius:0;
+ padding:0;
+ overflow:visible;
+ cursor:pointer
+}
+
+.inner {
+  width: 1100px;
+  margin: 0 auto;
+  position: relative;
+}
+
+section {
+  height: 840px;
+  background-color: rgba(0, 0, 0, 0.7);
+  color: #fff;
+}
+
+section .inner {
+  height: 100%;
+}
+
+/* section top */
+.section__top {
+  height: 13%;
+  display: flex;
+  justify-content: center;
+  position: relative;
+}
+
+.section__top header {
+  font-size: 14px;
+  font-weight: 600;
+  padding-bottom: 10px;
+  position: absolute;
+  bottom: 10px;
+  border-bottom: 1px solid rgba(255,255,255,0.4);
+}
+
+.section__top header:hover,
+.section__top div:hover {
+  cursor: pointer;
+}
+
+.section__top div:hover span:first-child {
+  text-decoration: underline;
+}
+
+.section__top div {
+  display: flex;
+  align-items: center;
+  font-size: 15px;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  color: rgba(255,255,255,0.6);
+}
+
+/* section mid */
+.section__mid {
+  height: 52%;
+  padding-top: 20px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+}
+
+.section__mid .boxoffice__block > div:first-child {
+  border-radius: 6px;
+  background-color: #000;
+  position: relative;
+}
+
+.section__mid .boxoffice__block img {
+  border-radius: 6px;
+  width: 245px;
+  height: 352px;
+  transition: .2s ease-in-out;
+  position: relative;
+  z-index: 1;
+} 
+
+.section__mid .boxoffice__block img:hover {
+  opacity: 0.1;
+  cursor: pointer;
+}
+
+.section__mid .boxoffice__block img + div {
+  display: block;
+  position: absolute;
+  box-sizing: border-box;
+  padding: 25px;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+
+.section__mid .boxoffice__block img + div:hover {
+  cursor: pointer;
+}
+
+.section__mid .boxoffice__block img + div > span {
+  display: block;
+  height: 85%;
+  font-size: 14px;
+  line-height: 1.4;
+}
+
+.section__mid .boxoffice__block img + div div {
+  width: 100%;
+  height: 15%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-top: 1px solid #333;
+}
+
+.section__mid .boxoffice__block img + div div span {
+  margin: 0 10px;
+}
+
+.section__mid .boxoffice__block img + div div span:first-child {
+  font-size: 13px;
+}
+.section__mid .boxoffice__block img + div div span:last-child {
+  font-size: 28px;
+  color: #037B94;
+}
+
+.section__mid .boxoffice__block__like {
+  margin-top: 5px;
+  height: 40px;
+  display: flex;
+}
+
+.section__mid .boxoffice__block__like div {
+  height: 100%;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.section__mid .boxoffice__block__like div:hover {
+  cursor: pointer;
+}
+
+.section__mid .boxoffice__block__like div:first-child {
+  width: 30%;
+  background-color: #151110;
+  margin-right: 5px;
+  border: 1px solid #333;
+}
+
+.section__mid .boxoffice__block__like div:last-child {
+  width: 70%;
+  background-color: #037B94;
+  border: 1px solid #000;
+}
+
+
+/* section bpt */
+.section__bot {
+
+  height: 35%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.section__bot .movie__table {
+  height: 25%;
+  display: flex;
+  justify-content: space-between;
+  background-color: rgba(0, 0, 0, 0.3);
+}
+
+.section__bot .movie__table li {
+  padding: 0 30px;
+  box-sizing: border-box;
+  width: 25%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+
+.section__bot .movie__table li input {
+  border: none;
+  height: 30px;
+  background-color: rgba(0, 0, 0, 0.0) ;
+  border-bottom: 2px solid #fff;
+  color: #fff;
+  font-size: 15px;
+}
+
+.section__bot .movie__table li input::placeholder {
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 15px;
+}
+
+.section__bot .movie__table li input:focus {
+  outline: none;
+}
+
+.section__bot .movie__table li input + div {
+  border-bottom: 2px solid #fff;
+  margin-top: 10px;
+}
+
+.section__bot .movie__table li input + div:hover {
+  cursor: pointer;
+}
+
+.section__bot .movie__table li img {
+  margin-right: 5px;
+}
+
+.section__bot .movie__table li::before {
+  content: "";
+  width: 1px;
+  height: 30px;
+  background-color: rgba(255,255,255,0.4);
+  position: absolute;
+  left: 0;
+}
+
+.section__bot .movie__table li:first-child:before{
+  display: none;
+}
+
+.section__bot .movie__table li:hover img {
+  cursor: pointer;
+}
+
+.section__bot .movie__table li:hover span {
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.section__bot div {
+  height: 30%;
+  text-align: center;  
+  position: relative;
+}
+
+.section__bot div img {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  animation-duration: 1.5s;
+  animation-name: updown;
+  animation-delay: .5s;
+  animation-iteration-count: infinite;
+}
+
+@keyframes updown {
+  0% {
+    top: 0;
+  }
+  25% {
+    top: -20px;
+  }
+  75% {
+    top: 0;
+  }
+  100% {
+    top: 0;
+  }
+}
\ No newline at end of file
diff --git a/css/nav-bar.css b/css/nav-bar.css
new file mode 100644
index 00000000..e725dc6b
--- /dev/null
+++ b/css/nav-bar.css
@@ -0,0 +1,379 @@
+nav {
+  background-color: rgba(0, 0, 0, 0.8);
+  color: #fff;
+  position: relative;
+  border-bottom: 1px solid gray;
+}
+
+nav > .inner {
+  height: 90px;
+  position: relative;
+  z-index: 2;
+}
+
+.logo {
+  position: absolute;
+  width: 140px;
+  height: 50px;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+}
+
+/* top */
+.nav__top {
+  width: 100%;
+  height: 40%;
+  display: flex;
+}
+
+.top__left,
+.top__right {
+  width: 50%;
+  height: 100%;
+  color: gray;
+  font-size: 13px;
+  display: flex;
+  align-items: center;
+}
+
+.top__left {
+  justify-content: flex-start;
+}
+
+.top__left li {
+  text-transform: uppercase;
+  margin-right: 13px;
+}
+
+.top__left li:hover,
+.top__right li:hover {
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.top__right {
+  justify-content: flex-end;
+}
+
+.top__right li {
+  margin-left: 13px;
+}
+
+
+
+
+/* bottom */
+.searchbtn--clicked {
+  text-decoration: underline;
+}
+
+.nav__bot {
+  width: 100%;
+  height: 60%;
+  display: flex;
+  position: relative;
+}
+
+.bot__left,
+.bot__right {
+  width: 50%;
+  height: 100%;
+  font-size: 17px;
+  display: flex;
+  align-items: center;
+}
+
+.bot__right {
+  justify-content: flex-end;
+}
+
+.items {
+  position: relative;
+}
+
+.items div:first-child {
+  margin: 0 30px;
+  padding: 18px 0;
+}
+
+.items:hover > div:first-child {
+  padding-bottom: 15px;
+  border-bottom: 3px solid #fff;
+  cursor: pointer;
+}
+
+.items .item__content {
+  font-size: 14px;
+}
+
+.items .item__content ul {
+  width: 100%;
+  position: fixed;
+  display: none;
+}
+
+.items:hover .item__content ul {
+  display: flex;
+  padding: 10px;
+}
+
+.items .item__content ul li {
+  display: block;
+  padding: 0 15px;
+}
+
+.items .item__content ul li:hover {
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.nav__bot .menu {
+  display: flex;
+  margin-right: 50px;
+}
+
+.nav__bot .menu .menu__element .menu__icon {
+  color: #fff;
+  margin: 0 8px;
+}
+
+.nav__bot .menu .menu__element .menu__icon:hover {
+  cursor: pointer;
+}
+
+.nav__bot .menu .menu__element .menu__content {
+  width: 100%;
+  left: 0;
+  top: 55px;
+  display: none;
+  position: absolute;
+  z-index: 1;
+}
+
+.menu--dropdown {
+  background-color: #333;
+}
+
+.menu--dropdown h2 {
+  font-size: 22px;
+  text-transform: uppercase;
+}
+
+.menu--dropdown .inner {
+  padding: 50px 0;
+}
+
+.menu--dropdown .inner > ul {
+  margin-top: 20px;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.menu--dropdown .inner > ul li {
+  text-align: center;
+  margin: 0 15px;
+}
+
+.menu--dropdown .inner > ul li div {
+  font-size: 18px;
+  font-weight: 600;
+  align-items: center;
+  padding: 15px 0;
+  border-top: 1px solid rgba(68, 68, 68, 0.5);
+  border-bottom: 1px solid rgba(68, 68, 68, 0.5);
+}
+.menu--dropdown .inner > ul li ul {
+  min-width: 130px
+}
+
+.menu--dropdown .inner > ul li ul li {
+  font-size: 13px; 
+  padding: 10px 0;
+}
+
+.menu--dropdown .inner > ul li ul li:hover {
+  cursor: pointer;
+  text-decoration: underline;
+  color: #339EB2;
+ }
+
+ .search--dropdown {
+  background-color: #351F67;
+  height: 380px;
+}
+
+.search--dropdown .inner {
+  height: 280px;
+}
+
+.search--dropdown .inner > div {
+  display: flex;
+  box-sizing: border-box;
+  height: 100px;
+  padding: 10px 0;
+}
+
+ .inner > div button {
+  color: #fff;
+  font-size: 14px;
+  font-weight: 500;
+  background: none ;
+}
+
+.movie-image {
+  padding: 0 50px 40px 0;
+}
+
+.movie-image img {
+  width: 150px;
+  height: 214px;
+}
+
+.movie-lists {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 240px;
+  height: 214px;
+  margin-bottom: 40px;
+}
+
+.movie-lists > li {
+  display: flex;
+}
+
+.movie-lists > li div:first-child {
+  font-size: 30px;
+  font-style: italic;
+  margin-right: 10px;
+}
+
+.movie-lists > li div:last-child {
+  display: flex;
+  font-size: 16px;
+  align-items: center;
+}
+
+.movie-lists > li div:last-child:hover {
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.search--dropdown .inner > div button:first-child {
+  margin-right: 10px;
+}
+
+.search--dropdown .inner > div > button:last-child {
+  margin-left: 10px;
+}
+
+.search--dropdown .inner div:last-child {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.search--dropdown .inner div:last-child > ul {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  padding: 10px 0;
+  align-items: center;
+}
+
+.search--dropdown .inner div:last-child > ul .search__movie {
+  display: flex;
+  width: 65%;
+  justify-content: center;
+}
+
+.search--dropdown .inner div:last-child > ul li input {
+  width: 400px;
+  height: 50px;
+  background-color: #351F67;
+  border: none;
+  border-bottom: 2px solid #fff;
+  font-size: 18px;
+  font-weight: 600;
+  color: #fff;
+  padding-left: 10px;
+}
+
+.search--dropdown .inner div:last-child > ul li input:focus {
+  outline: none;
+}
+
+.search--dropdown .inner div:last-child > ul li button {
+  width: 50px;
+  height: 54px;
+  border: none;
+  background-color: #351F67;
+  color: #fff;
+  border-bottom: 2px solid #fff;
+}
+
+.search--dropdown .inner div:last-child > ul li input::placeholder {
+  color: #fff;
+  font-size: 18px;
+}
+
+.calendar {
+  margin-left: 30px;
+}
+
+.calendar .person__icon {
+  margin-left: 10px;
+}
+
+.calendar__element > span:hover {
+  cursor: pointer;
+}
+
+.person__content {
+  height: 120px;
+  width: 100%;
+  left: 0;
+  top: 55px;
+  display: none;
+  position: absolute;
+  z-index: 1;
+  background-color: #333;
+}
+
+.person__content .inner div:first-child {
+  position: absolute;
+  font-size: 15px;
+  top: 35px;
+  left: 340px;
+}
+
+.person__content .inner div:last-child {
+  position: absolute;
+  font-size: 11px;
+  top: 70px;
+  left: 420px;
+}
+
+.person__content .inner div:last-child button {
+  margin-right: 15px;
+  font-size: 15px;
+  border: 1px solid #fff;
+  border-radius: 7px;
+  padding: 5px 30px;
+}
+
+.person__content .inner div:last-child button:hover {
+  color: #333;
+  background-color: #fff;
+}
+
+.person__content .inner div:last-child span {
+  color: rgba(255,255,255,.5);
+  text-decoration: underline;
+}
+
+.person__content .inner div:last-child span:hover {
+  cursor: pointer;
+}
\ No newline at end of file
diff --git a/images/background1.jpg b/images/background1.jpg
new file mode 100644
index 00000000..9dc312ef
Binary files /dev/null and b/images/background1.jpg differ
diff --git a/images/background2.jpg b/images/background2.jpg
new file mode 100644
index 00000000..088bbf82
Binary files /dev/null and b/images/background2.jpg differ
diff --git a/images/bg-main-megainfo-boutique.png b/images/bg-main-megainfo-boutique.png
new file mode 100644
index 00000000..c1ba10af
Binary files /dev/null and b/images/bg-main-megainfo-boutique.png differ
diff --git a/images/bg-main-megainfo-comfort.png b/images/bg-main-megainfo-comfort.png
new file mode 100644
index 00000000..392486b4
Binary files /dev/null and b/images/bg-main-megainfo-comfort.png differ
diff --git a/images/bg-main-megainfo-dolby.png b/images/bg-main-megainfo-dolby.png
new file mode 100644
index 00000000..75105588
Binary files /dev/null and b/images/bg-main-megainfo-dolby.png differ
diff --git a/images/bg-main-megainfo-kids.png b/images/bg-main-megainfo-kids.png
new file mode 100644
index 00000000..564ccf15
Binary files /dev/null and b/images/bg-main-megainfo-kids.png differ
diff --git a/images/bg-main-megainfo-mx.png b/images/bg-main-megainfo-mx.png
new file mode 100644
index 00000000..68f05756
Binary files /dev/null and b/images/bg-main-megainfo-mx.png differ
diff --git a/images/bg-main-megainfo-private.png b/images/bg-main-megainfo-private.png
new file mode 100644
index 00000000..76242829
Binary files /dev/null and b/images/bg-main-megainfo-private.png differ
diff --git a/images/bg-main-megainfo-puppy.jpg b/images/bg-main-megainfo-puppy.jpg
new file mode 100644
index 00000000..38f8ac8b
Binary files /dev/null and b/images/bg-main-megainfo-puppy.jpg differ
diff --git a/images/btn-specialtheater-next.png b/images/btn-specialtheater-next.png
new file mode 100644
index 00000000..45164439
Binary files /dev/null and b/images/btn-specialtheater-next.png differ
diff --git a/images/btn-specialtheater-prev.png b/images/btn-specialtheater-prev.png
new file mode 100644
index 00000000..83c86859
Binary files /dev/null and b/images/btn-specialtheater-prev.png differ
diff --git a/images/ico-boxoffice-main.png b/images/ico-boxoffice-main.png
new file mode 100644
index 00000000..0e5df277
Binary files /dev/null and b/images/ico-boxoffice-main.png differ
diff --git a/images/ico-facebookN.png b/images/ico-facebookN.png
new file mode 100644
index 00000000..9f6b7730
Binary files /dev/null and b/images/ico-facebookN.png differ
diff --git a/images/ico-instagramN.png b/images/ico-instagramN.png
new file mode 100644
index 00000000..fb6e1904
Binary files /dev/null and b/images/ico-instagramN.png differ
diff --git a/images/ico-main-boutique.png b/images/ico-main-boutique.png
new file mode 100644
index 00000000..3a919689
Binary files /dev/null and b/images/ico-main-boutique.png differ
diff --git a/images/ico-main-customer.png b/images/ico-main-customer.png
new file mode 100644
index 00000000..138d2b99
Binary files /dev/null and b/images/ico-main-customer.png differ
diff --git a/images/ico-main-faq.png b/images/ico-main-faq.png
new file mode 100644
index 00000000..48f6fd34
Binary files /dev/null and b/images/ico-main-faq.png differ
diff --git a/images/ico-main-group.png b/images/ico-main-group.png
new file mode 100644
index 00000000..bf675370
Binary files /dev/null and b/images/ico-main-group.png differ
diff --git a/images/ico-main-lost.png b/images/ico-main-lost.png
new file mode 100644
index 00000000..8162e4fe
Binary files /dev/null and b/images/ico-main-lost.png differ
diff --git a/images/ico-main-qna.png b/images/ico-main-qna.png
new file mode 100644
index 00000000..0faeb63f
Binary files /dev/null and b/images/ico-main-qna.png differ
diff --git a/images/ico-mouse.png b/images/ico-mouse.png
new file mode 100644
index 00000000..4bf72391
Binary files /dev/null and b/images/ico-mouse.png differ
diff --git a/images/ico-quick-reserve-main.png b/images/ico-quick-reserve-main.png
new file mode 100644
index 00000000..6361624a
Binary files /dev/null and b/images/ico-quick-reserve-main.png differ
diff --git a/images/ico-schedule-main.png b/images/ico-schedule-main.png
new file mode 100644
index 00000000..0b9dab2d
Binary files /dev/null and b/images/ico-schedule-main.png differ
diff --git a/images/ico-twitterN.png b/images/ico-twitterN.png
new file mode 100644
index 00000000..f8e2d96c
Binary files /dev/null and b/images/ico-twitterN.png differ
diff --git a/images/ico-youtubeN.png b/images/ico-youtubeN.png
new file mode 100644
index 00000000..fb22b195
Binary files /dev/null and b/images/ico-youtubeN.png differ
diff --git a/images/logo-opacity_new2.png b/images/logo-opacity_new2.png
new file mode 100644
index 00000000..d644fcbe
Binary files /dev/null and b/images/logo-opacity_new2.png differ
diff --git a/images/logo-white_new2.png b/images/logo-white_new2.png
new file mode 100644
index 00000000..671f9213
Binary files /dev/null and b/images/logo-white_new2.png differ
diff --git "a/images/\353\215\224 \355\215\274\354\212\244\355\212\270 \354\212\254\353\236\250\353\215\251\355\201\254.jpg" "b/images/\353\215\224 \355\215\274\354\212\244\355\212\270 \354\212\254\353\236\250\353\215\251\355\201\254.jpg"
new file mode 100644
index 00000000..c1fd4294
Binary files /dev/null and "b/images/\353\215\224 \355\215\274\354\212\244\355\212\270 \354\212\254\353\236\250\353\215\251\355\201\254.jpg" differ
diff --git "a/images/\353\215\230\354\240\204 \354\225\244 \353\223\234\353\236\230\352\263\244 \353\217\204\354\240\201\353\223\244\354\235\230 \353\252\205\354\230\210.jpg" "b/images/\353\215\230\354\240\204 \354\225\244 \353\223\234\353\236\230\352\263\244 \353\217\204\354\240\201\353\223\244\354\235\230 \353\252\205\354\230\210.jpg"
new file mode 100644
index 00000000..69f134e1
Binary files /dev/null and "b/images/\353\215\230\354\240\204 \354\225\244 \353\223\234\353\236\230\352\263\244 \353\217\204\354\240\201\353\223\244\354\235\230 \353\252\205\354\230\210.jpg" differ
diff --git "a/images/\353\240\210\353\257\270\354\240\234\353\235\274\353\270\224.jpg" "b/images/\353\240\210\353\257\270\354\240\234\353\235\274\353\270\224.jpg"
new file mode 100644
index 00000000..b3602c2a
Binary files /dev/null and "b/images/\353\240\210\353\257\270\354\240\234\353\235\274\353\270\224.jpg" differ
diff --git "a/images/\353\246\254\353\260\224\354\232\264\353\223\234.jpg" "b/images/\353\246\254\353\260\224\354\232\264\353\223\234.jpg"
new file mode 100644
index 00000000..669e7b02
Binary files /dev/null and "b/images/\353\246\254\353\260\224\354\232\264\353\223\234.jpg" differ
diff --git "a/images/\353\271\204\352\270\264 \354\226\264\352\262\214\354\235\270.jpg" "b/images/\353\271\204\352\270\264 \354\226\264\352\262\214\354\235\270.jpg"
new file mode 100644
index 00000000..bb04d9e6
Binary files /dev/null and "b/images/\353\271\204\352\270\264 \354\226\264\352\262\214\354\235\270.jpg" differ
diff --git "a/images/\354\212\244\354\246\210\353\251\224\354\235\230 \353\254\270\353\213\250\354\206\215.jpg" "b/images/\354\212\244\354\246\210\353\251\224\354\235\230 \353\254\270\353\213\250\354\206\215.jpg"
new file mode 100644
index 00000000..c43048e0
Binary files /dev/null and "b/images/\354\212\244\354\246\210\353\251\224\354\235\230 \353\254\270\353\213\250\354\206\215.jpg" differ
diff --git "a/images/\354\225\204\353\260\224\355\203\200 \353\254\274\354\235\230 \352\270\270.jpg" "b/images/\354\225\204\353\260\224\355\203\200 \353\254\274\354\235\230 \352\270\270.jpg"
new file mode 100644
index 00000000..a0642ae7
Binary files /dev/null and "b/images/\354\225\204\353\260\224\355\203\200 \353\254\274\354\235\230 \352\270\270.jpg" differ
diff --git "a/images/\355\214\250\354\231\225\353\263\204\355\235\254 \353\224\224 \354\230\244\353\246\254\354\247\200\353\204\220.jpg" "b/images/\355\214\250\354\231\225\353\263\204\355\235\254 \353\224\224 \354\230\244\353\246\254\354\247\200\353\204\220.jpg"
new file mode 100644
index 00000000..455a357c
Binary files /dev/null and "b/images/\355\214\250\354\231\225\353\263\204\355\235\254 \353\224\224 \354\230\244\353\246\254\354\247\200\353\204\220.jpg" differ
diff --git "a/images/\355\225\264\355\224\274 \355\210\254\352\262\214\353\215\224 \353\246\254\353\247\210\354\212\244\355\204\260\353\247\201.jpg" "b/images/\355\225\264\355\224\274 \355\210\254\352\262\214\353\215\224 \353\246\254\353\247\210\354\212\244\355\204\260\353\247\201.jpg"
new file mode 100644
index 00000000..6f1e3c7e
Binary files /dev/null and "b/images/\355\225\264\355\224\274 \355\210\254\352\262\214\353\215\224 \353\246\254\353\247\210\354\212\244\355\204\260\353\247\201.jpg" differ
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..3c8a878c
--- /dev/null
+++ b/index.html
@@ -0,0 +1,616 @@
+<!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" />
+    <link
+      rel="shortcut icon"
+      href="http://www.megabox.co.kr/static/pc/images/favicon.ico"
+    />
+    <title>MEET PLAY SHARE, 메가박스</title>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.css"
+    />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"
+    />
+    <link rel="stylesheet" href="./css/main.css" />
+    <link rel="stylesheet" href="./css/nav-bar.css" />
+    <link rel="stylesheet" href="./css/information.css" />
+    <link rel="stylesheet" href="./css/footer.css" />
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"
+      integrity="sha512-cOH8ndwGgPo+K7pTvMrqYbmI8u8k6Sho3js0gOqVWTmQMlLIi6TbqGWRTpf1ga8ci9H3iPsvDLr4X7xwhC/+DQ=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    ></script>
+    <script defer src="./js/main.js"></script>
+    <script defer src="./js/nav-bar.js"></script>
+  </head>
+  <body>
+    <main>
+      <div class="main__bg">
+        <div class="bg-image"></div>
+      </div>
+      <nav>
+        <div class="inner">
+          <div class="logo">
+            <a href="/">
+              <img src="./images/logo-white_new2.png" alt="" />
+            </a>
+          </div>
+          <div class="nav__top">
+            <ul class="top__left">
+              <li>vip lounge</li>
+              <li>멤버십</li>
+              <li>고객센터</li>
+            </ul>
+            <ul class="top__right">
+              <li>로그인</li>
+              <li>회원가입</li>
+              <li>빠른예매</li>
+            </ul>
+          </div>
+          <div class="nav__bot">
+            <ul class="bot__left">
+              <div class="menu">
+                <div class="menu__element">
+                  <button class="menu__icon menu--onoff">
+                    <span class="material-symbols-outlined"> menu </span>
+                  </button>
+                  <div class="menu__content menu--dropdown">
+                    <div class="inner">
+                      <h2>sitemap</h2>
+                      <ul>
+                        <li>
+                          <div>
+                            <h4>영화</h4>
+                          </div>
+                          <ul>
+                            <li>전체영화</li>
+                            <li>큐레이션</li>
+                            <li>영화제</li>
+                            <li>무비포스트</li>
+                          </ul>
+                        </li>
+                        <li>
+                          <div>
+                            <h4>예매</h4>
+                          </div>
+                          <ul>
+                            <li>빠른예매</li>
+                            <li>상영시간표</li>
+                            <li>더 부티크 프라이빗 예매</li>
+                          </ul>
+                        </li>
+                        <li>
+                          <div>
+                            <h4>극장</h4>
+                          </div>
+                          <ul>
+                            <li>전체극장</li>
+                            <li>특별관</li>
+                          </ul>
+                        </li>
+                        <li>
+                          <div>
+                            <h4>이벤트</h4>
+                          </div>
+                          <ul>
+                            <li>진행중 이벤트</li>
+                            <li>지난 이벤트</li>
+                            <li>당첨자발표</li>
+                          </ul>
+                        </li>
+                        <li>
+                          <div>
+                            <h4>스토어</h4>
+                          </div>
+                          <ul>
+                            <li>새로운 상품</li>
+                            <li>메가티켓</li>
+                            <li>팝콘/음료/굿즈</li>
+                            <li>포인트몰</li>
+                          </ul>
+                        </li>
+                        <li>
+                          <div>
+                            <h4>나의 메가박스</h4>
+                          </div>
+                          <ul>
+                            <li>나의 메가박스 홈</li>
+                            <li>예매/구매내역</li>
+                            <li>영화관람권</li>
+                            <li>스토어교환권</li>
+                            <li>할인/제휴쿠폰</li>
+                            <li>멤버십포인트</li>
+                            <li>나의 무비스토리</li>
+                            <li>나의 이벤트 응모내역</li>
+                            <li>나의 문의내역</li>
+                            <li>자주쓰는 할인카드</li>
+                            <li>회원정보</li>
+                          </ul>
+                        </li>
+                        <li>
+                          <div>
+                            <h4>혜택</h4>
+                          </div>
+                          <ul>
+                            <li>멤버십 안내</li>
+                            <li>vip lounge</li>
+                            <li>제휴/할인</li>
+                          </ul>
+                        </li>
+                        <li>
+                          <div>
+                            <h4>고객센터</h4>
+                          </div>
+                          <ul>
+                            <li>고객센터 홈</li>
+                            <li>자주묻는질문</li>
+                            <li>공지사항</li>
+                            <li>1:1문의</li>
+                            <li>단체/대관문의</li>
+                            <li>분실물문의</li>
+                          </ul>
+                        </li>
+                        <li>
+                          <div>
+                            <h4>회사소개</h4>
+                          </div>
+                          <ul>
+                            <li>메가박스소개</li>
+                            <li>사회공헌</li>
+                            <li>홍보자료</li>
+                            <li>제휴/부대사업문의</li>
+                            <li>온라인제보센터</li>
+                            <li>IR자료</li>
+                            <li>인재채용</li>
+                            <li>윤리경영</li>
+                          </ul>
+                        </li>
+                        <li>
+                          <div>
+                            <h4>이용정책</h4>
+                          </div>
+                          <ul>
+                            <li>이용약관</li>
+                            <li>위치기반서비스 이용약관</li>
+                            <li>개인정보처리방침</li>
+                            <li>스크린수배정에관한기준</li>
+                          </ul>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+                <div class="menu__element">
+                  <button class="menu__icon search--onoff">
+                    <span class="material-symbols-outlined"> search </span>
+                  </button>
+                  <div class="menu__content search--dropdown">
+                    <div class="inner">
+                      <div>
+                        <button class="searchbtn--clicked">예매율 순</button>
+                        <button>메가박스 관객순</button>
+                      </div>
+                      <div>
+                        <ul>
+                          <li class="movie-image">
+                            <div>
+                              <img
+                                id="movie-image-changes"
+                                src="./images/스즈메의 문단속.jpg"
+                                alt=""
+                              />
+                            </div>
+                          </li>
+                          <li>
+                            <ul class="movie-lists">
+                              <li>
+                                <div>1</div>
+                                <div>
+                                  <span class="movie--list"
+                                    >스즈메의 문단속</span
+                                  >
+                                </div>
+                              </li>
+                              <li>
+                                <div>2</div>
+                                <div>
+                                  <span class="movie--list"
+                                    >더 퍼스트 슬램덩크</span
+                                  >
+                                </div>
+                              </li>
+                              <li>
+                                <div>3</div>
+                                <div>
+                                  <span class="movie--list"
+                                    >던전 앤 드래곤 도적들의 명예</span
+                                  >
+                                </div>
+                              </li>
+                              <li>
+                                <div>4</div>
+                                <div>
+                                  <span class="movie--list"
+                                    >해피 투게더 리마스터링</span
+                                  >
+                                </div>
+                              </li>
+                              <li>
+                                <div>5</div>
+                                <div>
+                                  <span class="movie--list"
+                                    >패왕별희 디 오리지널</span
+                                  >
+                                </div>
+                              </li>
+                            </ul>
+                          </li>
+                          <li class="search__movie">
+                            <input
+                              type="text"
+                              placeholder="영화를 검색하세요"
+                            />
+                            <button>
+                              <span class="material-symbols-outlined">
+                                search
+                              </span>
+                            </button>
+                          </li>
+                        </ul>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <li class="items">
+                <div>
+                  <h2 class="item__name">영화</h2>
+                </div>
+                <div class="item__content">
+                  <ul>
+                    <li>전체영화</li>
+                    <li>큐레이션</li>
+                    <li>무비포스트</li>
+                  </ul>
+                </div>
+              </li>
+              <li class="items">
+                <div>
+                  <h2 class="item__name">예매</h2>
+                </div>
+                <div class="item__content">
+                  <ul>
+                    <li>빠른예매</li>
+                    <li>상영시간표</li>
+                    <li>더 부티크 프라이빗 예매</li>
+                  </ul>
+                </div>
+              </li>
+              <li class="items">
+                <div>
+                  <h2 class="item__name">극장</h2>
+                </div>
+                <div class="item__content">
+                  <ul>
+                    <li>전체극장</li>
+                    <li>특별관</li>
+                  </ul>
+                </div>
+              </li>
+            </ul>
+            <ul class="bot__right">
+              <li class="items">
+                <div>
+                  <h2 class="item__name">이벤트</h2>
+                </div>
+                <div class="item__content">
+                  <ul>
+                    <li>진행중 이벤트</li>
+                    <li>지난 이벤트</li>
+                    <li>당첨자 발표</li>
+                  </ul>
+                </div>
+              </li>
+              <li class="items">
+                <div>
+                  <h2 class="item__name">스토어</h2>
+                </div>
+              </li>
+              <li class="items">
+                <div>
+                  <h2 class="item__name">혜택</h2>
+                </div>
+                <div class="item__content">
+                  <ul>
+                    <li>메가박스 멤버십</li>
+                    <li>제휴/할인</li>
+                  </ul>
+                </div>
+              </li>
+              <div class="calendar">
+                <div class="calendar__element">
+                  <span class="material-symbols-outlined">
+                    calendar_month
+                  </span>
+                  <button class="person__icon person--onoff">
+                    <span class="material-symbols-outlined"> person </span>
+                  </button>
+                </div>
+                <div class="person__content person--dropdown">
+                  <div class="inner">
+                    <div>
+                      <span
+                        >영화를 사랑하는 당신을 위한 꼭 맞는 혜택까지 확인해
+                        보세요!</span
+                      >
+                    </div>
+                    <div>
+                      <button>로그인</button>
+                      <span>혹시 아직 회원이 아니신가요?</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </ul>
+          </div>
+        </div>
+      </nav>
+      <section>
+        <div class="inner">
+          <div class="section__top">
+            <header>박스오피스</header>
+            <div>
+              <span>더 많은 영화보기</span>
+              <span class="material-symbols-outlined"> add </span>
+            </div>
+          </div>
+          <div class="section__mid">
+            <div class="boxoffice__block">
+              <div>
+                <img src="./images/스즈메의 문단속.jpg" alt="" />
+                <div>
+                  <span
+                    >“이 근처에 폐허 없니? 문을 찾고 있어” <br />규슈의 한적한
+                    마을에 살고 있는 소녀 ‘스즈메’는 문을 찾아 여행 중인 청년
+                    ‘소타’를 만난다.</span
+                  >
+                  <div>
+                    <span>관람평</span>
+                    <span>9</span>
+                  </div>
+                </div>
+              </div>
+              <div class="boxoffice__block__like">
+                <div>
+                  <span>♡ 5.1k</span>
+                </div>
+                <div>
+                  <span>예매</span>
+                </div>
+              </div>
+            </div>
+            <div class="boxoffice__block">
+              <div>
+                <img src="./images/더 퍼스트 슬램덩크.jpg" alt="" />
+                <div>
+                  <span
+                    >전국 제패를 꿈꾸는 북산고 농구부 5인방의 꿈과 열정, 멈추지
+                    않는 도전을 그린 영화</span
+                  >
+                  <div>
+                    <span>관람평</span>
+                    <span>9.5</span>
+                  </div>
+                </div>
+              </div>
+              <div class="boxoffice__block__like">
+                <div>
+                  <span>♡ 5.2k</span>
+                </div>
+                <div>
+                  <span>예매</span>
+                </div>
+              </div>
+            </div>
+            <div class="boxoffice__block">
+              <div>
+                <img src="./images/던전 앤 드래곤 도적들의 명예.jpg" alt="" />
+                <div>
+                  <span
+                    >한때는 명예로운 기사였지만, ‘어떤 사건’ 이후 ‘홀가’,
+                    ‘사이먼’, ‘포지’와 함께 도적질을 하게 된 ‘에드긴’.
+                    ‘소피나’의 제안으로 ’부활의 서판’을 얻기 위해 ‘코린의 성’에
+                    잠입하지만 ‘포지’와 ‘소피나’의 배신으로 실패</span
+                  >
+                  <div>
+                    <span>관람평</span>
+                    <span>8.5</span>
+                  </div>
+                </div>
+              </div>
+              <div class="boxoffice__block__like">
+                <div>
+                  <span>♡ 498</span>
+                </div>
+                <div>
+                  <span>예매</span>
+                </div>
+              </div>
+            </div>
+            <div class="boxoffice__block">
+              <div>
+                <img src="./images/해피 투게더 리마스터링.jpg" alt="" />
+                <div>
+                  <span
+                    >“우리 다시 시작하자” 그가 다시 시작하자고 하면 난 늘 그와
+                    함께했다 <br />홍콩을 떠나 지구 반대편 부에노스아이레스에 온
+                    ‘보영’과 ‘아휘’ 이과수 폭포를 찾아가던 중 두 사람은 사소한
+                    다툼 끝에 이별하고 각자의 길을 떠난다.
+                  </span>
+                  <div>
+                    <span>관람평</span>
+                    <span>8.8</span>
+                  </div>
+                </div>
+              </div>
+              <div class="boxoffice__block__like">
+                <div>
+                  <span>♡ 970</span>
+                </div>
+                <div>
+                  <span>예매</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="section__bot">
+            <ul class="movie__table">
+              <li>
+                <input type="text" placeholder="영화명을 입력해 주세요" />
+                <div class="material-symbols-outlined">search</div>
+              </li>
+              <li>
+                <img src="./images/ico-schedule-main.png" alt="" />
+                <span>상영시간표</span>
+              </li>
+              <li>
+                <img src="./images/ico-boxoffice-main.png" alt="" />
+                <span>박스오피스</span>
+              </li>
+              <li>
+                <img src="./images/ico-quick-reserve-main.png" alt="" />
+                <span>빠른예매</span>
+              </li>
+            </ul>
+            <div>
+              <img src="./images/ico-mouse.png" alt="" />
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+    <aside>
+      <header class="info__title">
+        <div class="inner">
+          <span>메가박스 안내</span>
+        </div>
+      </header>
+      <div class="info__banner">
+        <button>
+          <img src="./images/btn-specialtheater-prev.png" alt="" />
+        </button>
+        <ul class="inner">
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+        </ul>
+        <button>
+          <img src="./images/btn-specialtheater-next.png" alt="" />
+        </button>
+      </div>
+      <div class="info__text">
+        <div>
+          <div class="inner">
+            <span>지점</span>
+            <div class="text__center">
+              <div>
+                <span>[상암월드컵경기장]</span>
+                <span>[상암월드컵경기장] K리그 축구 경기로 인한 주차 안내</span>
+              </div>
+              <span>2023.04.03</span>
+            </div>
+            <div>
+              <span>더보기</span>
+              <span class="material-symbols-outlined"> arrow_forward_ios </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="info__icon">
+        <div class="inner">
+          <div>
+            <img src="./images/ico-main-customer.png" alt="" />
+            <span>고객센터</span>
+          </div>
+          <div>
+            <img src="./images/ico-main-faq.png" alt="" />
+            <span>자주 묻는 질문</span>
+          </div>
+          <div>
+            <img src="./images/ico-main-qna.png" alt="" />
+            <span>1:1 문의</span>
+          </div>
+          <div>
+            <img src="./images/ico-main-group.png" alt="" />
+            <span>단체/대관문의</span>
+          </div>
+          <div>
+            <img src="./images/ico-main-lost.png" alt="" />
+            <span>분실물 문의/접수</span>
+          </div>
+          <div>
+            <img src="./images/ico-main-boutique.png" alt="" />
+            <span>
+              더 부티크 프라이빗 <br />
+              대관예매
+            </span>
+          </div>
+        </div>
+      </div>
+      <div></div>
+    </aside>
+    <footer>
+      <div class="inner">
+        <div class="footer__top">
+          <ul>
+            <li>회사소개</li>
+            <li>인재채용</li>
+            <li>사회공헌</li>
+            <li>제휴/광고/부대사업문의</li>
+            <li>이용약관</li>
+            <li>위치기반서비스이용약관</li>
+            <li>개인정보처리방침</li>
+            <li>윤리경영</li>
+          </ul>
+          <div class="flex-space"></div>
+          <button>
+            <span class="material-symbols-outlined"> search </span>
+            <span>극장찾기</span>
+          </button>
+        </div>
+        <div class="footer__bot">
+          <div></div>
+          <ul>
+            <li>
+              서울특별시 성동구 왕십리로 50, 6층 (성수동1가, 메가박스 스퀘어)
+              ARS 1544-0070
+            </li>
+            <li>
+              대표자명 홍정인 · 개인정보보호책임자 공성진 · 사업자등록번호
+              211-86-59478 · 통신판매업신고번호 2023-서울성동-0177
+            </li>
+            <li>COPYRIGHT © MegaboxJoongAng, Inc. All right reserved</li>
+          </ul>
+          <div class="flex-space"></div>
+          <div>
+            <i></i>
+            <i></i>
+            <i></i>
+            <i></i>
+          </div>
+        </div>
+      </div>
+    </footer>
+  </body>
+</html>
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 00000000..b0d22365
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,15 @@
+const infoBtnPrv = document.querySelector(".info__banner button:first-child")
+const infoBtnNxt = document.querySelector(".info__banner ul + button")
+const infoBanner = document.querySelectorAll(".info__banner ul li")
+
+infoBtnNxt.addEventListener("click", function () {
+  infoBanner.forEach(function(event) {
+    event.classList.add("banner--moved")
+  })
+})
+
+infoBtnPrv.addEventListener("click", function () {
+  infoBanner.forEach(function(event) {
+    event.classList.remove("banner--moved")
+  })
+})
\ No newline at end of file
diff --git a/js/nav-bar.js b/js/nav-bar.js
new file mode 100644
index 00000000..6b46fcdc
--- /dev/null
+++ b/js/nav-bar.js
@@ -0,0 +1,88 @@
+const menuIcon = document.querySelector(".nav__bot .menu--onoff")
+const menuDrop = document.querySelector(".nav__bot .menu--dropdown")
+const searchIcon = document.querySelector(".nav__bot .search--onoff")
+const searchDrop = document.querySelector(".nav__bot .search--dropdown")
+const personIcon = document.querySelector(".nav__bot .person--onoff")
+const personDrop = document.querySelector(".nav__bot .person--dropdown")
+
+menuIcon.addEventListener("click", function() {
+  if (menuDrop.style.display == "none") {
+    menuDrop.style.display = "block";
+    menuIcon.querySelector(".material-symbols-outlined").innerHTML = "cancel";
+    searchDrop.style.display = "none";
+    personDrop.style.display = "none";
+    searchIcon.querySelector(".material-symbols-outlined").innerHTML = "search";
+    personIcon.querySelector(".material-symbols-outlined").innerHTML = "person";
+  } else {
+    menuDrop.style.display = "none";
+    menuIcon.querySelector(".material-symbols-outlined").innerHTML = "menu";
+  }
+})
+
+searchIcon.addEventListener("click", function() {
+  if (searchDrop.style.display == "none") {
+    searchDrop.style.display = "block";
+    searchIcon.querySelector(".material-symbols-outlined").innerHTML = "cancel";
+    menuDrop.style.display = "none";
+    personDrop.style.display = "none";
+    menuIcon.querySelector(".material-symbols-outlined").innerHTML = "menu"
+    personIcon.querySelector(".material-symbols-outlined").innerHTML = "person";
+  } else {
+    searchDrop.style.display = "none";
+    searchIcon.querySelector(".material-symbols-outlined").innerHTML = "search";
+  }
+})
+
+personIcon.addEventListener("click", function() {
+  if (personDrop.style.display == "none") {
+    personDrop.style.display = "block";
+    personIcon.querySelector(".material-symbols-outlined").innerHTML = "cancel";
+    menuDrop.style.display = "none";
+    searchDrop.style.display = "none";
+    menuIcon.querySelector(".material-symbols-outlined").innerHTML = "menu"
+    searchIcon.querySelector(".material-symbols-outlined").innerHTML = "search"
+  } else {
+    personDrop.style.display = "none";
+    personIcon.querySelector(".material-symbols-outlined").innerHTML = "person";
+  }
+})
+
+const movieTitleHover = document.querySelectorAll(".movie--list")
+const movieImage = document.querySelector("#movie-image-changes");
+
+movieTitleHover.forEach(function(span) {
+  span.addEventListener("mouseover", function(event) {
+    movieImage.src = `./images/${event.target.innerText}.jpg`;
+  })
+})
+
+const reservBtn = document.querySelector(".search--dropdown .inner > div button:first-child");
+const customBtn = document.querySelector(".search--dropdown .inner > div button:last-child");
+const searchBtn = document.querySelectorAll(".search--dropdown .inner > div button")
+
+reservBtn.addEventListener("click", function(event) {
+  event.target.classList.add("searchbtn--clicked")
+  customBtn.classList.remove("searchbtn--clicked")
+  if (reservBtn.classList.contains("searchbtn--clicked")) {
+    movieImage.src = `./images/스즈메의 문단속.jpg`;
+    movieTitleHover[0].innerText = "스즈메의 문단속"
+    movieTitleHover[1].innerText = "더 퍼스트 슬램덩크"
+    movieTitleHover[2].innerText = "던전 앤 드래곤 도적들의 명예"
+    movieTitleHover[3].innerText = "해피 투게더 리마스터링"
+    movieTitleHover[4].innerText = "패왕별희 디 오리지널"
+  }
+})
+
+customBtn.addEventListener("click", function(event) {
+  event.target.classList.add("searchbtn--clicked")
+  reservBtn.classList.remove("searchbtn--clicked")
+  if (customBtn.classList.contains("searchbtn--clicked")) {
+    movieImage.src = `./images/아바타 물의 길.jpg`;
+    movieTitleHover[0].innerText = "아바타 물의 길"
+    movieTitleHover[1].innerText = "레미제라블"
+    movieTitleHover[2].innerText = "더 퍼스트 슬램덩크"
+    movieTitleHover[3].innerText = "스즈메의 문단속"
+    movieTitleHover[4].innerText = "비긴 어게인"
+  }
+})
+