diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 00000000..68586da0
Binary files /dev/null and b/.DS_Store differ
diff --git a/README.md b/README.md
index 598dc30f..e3dd4034 100644
--- a/README.md
+++ b/README.md
@@ -1,45 +1,76 @@
-# 👀 자신이 원하는 사이트 레이아웃 클론
+# 월간 공진단 페이지 클론코딩
 
-원하는 사이트(페이지)를 자유롭게 선택하고 레이아웃을 클론 코딩하세요.  
-평소에 도전해 보고 싶었거나 혹은 자신의 수준에 맞는 사이트(페이지)를 선택하세요.   
-과제 수행 및 리뷰 기간은 별도 공지를 참고하세요!
 
-## 과제 수행 및 제출 방법
 
-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`)
+원본페이지 : [월간 공진단](https://webzine.kotpa.org/vol54?mod=document&uid=3919l)
 
-- `main` 혹은 다른 사람의 브랜치로 절대 병합하지 않도록 주의하세요!
-- Pull Request에서 보이는 설명을 다른 사람들이 이해하기 쉽도록 꼼꼼하게 작성하세요!
-- Pull Request에서 과제 제출 후 절대 병합(Merge)하지 않도록 주의하세요!
-- 과제 수행 및 제출 과정에서 문제가 발생한 경우, 바로 담당 멘토나 강사에서 얘기하세요!
 
-## 필수 요구사항
+클론코딩 페이지 : [leesiwoo 클론 코딩 페이지](https://stately-meerkat-5fd972.netlify.app/)
 
-- [ ] 과제에 대한 설명을 포함한 `README.md` 파일을 제공하세요!
-- [ ] 과제 결과와 비교할 수 있는 실제 사이트(페이지)의 주소를 명시하세요!
-- [ ] 과정에서 사용한 프로젝트 폴더/파일이 모두 포함돼야 합니다, 일부 파일만 제출하지 마세요! 
-- [ ] 실제 서비스로 배포하고 접근 가능한 링크를 추가해야 합니다.
 
-## 선택 요구사항
 
-- [ ] `<header>`, `<section>` 등 시멘틱 태그를 최대한 활용해보세요.
-- [ ] 실제 사이트의 레거시 코드 활용보단 최신의 CSS Flex 혹은 Grid 등을 활용해보세요.
-- [ ] 부분적으로 BEM 방법론을 도입해보세요.
-- [ ] JS가 필요한 부분은 되도록 생략하되 이유를 명시해보세요.(CSS로 대체 가능한지 피드백이 있을 수 있겠죠?!)
-- [ ] JS가 필요한 부분 중 구현할 부분이 있다면 자유롭게 구현해보세요.(JS 과제가 아니니까 가볍게 구현하시길 추천해요)
-- [ ] SCSS 등의 CSS 전처리도구를 도입해보세요.
-- [ ] SCSS 컴파일에 Webpack이나 Parcel 같은 번들러를 활용해보세요.
+---
+
+
+#### 클론 코딩 목표
+
+
++ HTML/CSS를 활용한 페이지 레이아웃 구조 만들어보기
+
+
+  + 다양한 방법으로 시도 후 **원리 이해하기**
+  
+  
++ 페이지 클론코딩에대한 감 잡아보기
+
+
+___
+
+
+### 과정 진행 설명
+
+
++ position 활용하는 방법에 대해 공부하면서 진행했습니다
+
+
++ 과정을 진행하는데 있어 기존 페이지의 CSS와 HTML을 보지 않고 어떻게 하면 저 구조가 나올지에 대해 최대한 생각하려고 시도하였습니다
+
+
+  + 어려운 점만 참고하며 진행함 
+
+
++ 효율적으로 페이지를 구성할 수 있는지, CSS 파일을 최대한 효율적으로 구성하도록 하였습니다
+
+
+___
+
+
+### 추가할 사항
+
++ header main menu 부분의 hover 효과를 구현하는데 있어 호버시 아이콘(기호)를 추가하는 부분에 있어서 구현하지 못했습니다
+
+
++ 하단의 추가 기술 hover 효과 구현에 있어서 색상이 변화하는 부분을 구현하지 못했습니다
+
+
++ JS를 필요로하는 부분은 진행하지 못하였습니다
+
+
+___
+
+
+### 23.04.23 리팩토링
+
++ 이전 과제를 진행할때 사용해 보지 않았던 BEM 방법론을 사용해 보았습니다
+
+
++ 중복되는 스타일은 하나의 class명으로 지정하여 불필요한 코드들을 삭제하였습니다
+
+
++ 시맨틱 태그를 수정 보완하였습니다
+
+
++ 하지만 아직도 JS가 들어가는 부분은 진행을 하지 못했습니다 ㅜㅜ
 
-## 손쉬운 이미지 추출 방법
 
-사이트 클론에 필요한 이미지를 좀 더 쉽게 추출하기 위해서 Chrome 확장 프로그램인 [Image Downloader](https://chrome.google.com/webstore/detail/image-downloader/cnpniohnfphhjihaiiggeabnkjhpaldj?hl=ko)를 사용하세요.
 
-1. 원하는 사이트 접속
-1. Image Downloader 확장 프로그램 실행
-1. 다운로드 원하는 이미지 선택
-1. 서브 폴더 이름(Save to subfolder) 명시
-1. 다운로드!
diff --git a/images/.DS_Store b/images/.DS_Store
new file mode 100644
index 00000000..5ce0dae4
Binary files /dev/null and b/images/.DS_Store differ
diff --git a/images/53_people.jpg b/images/53_people.jpg
new file mode 100644
index 00000000..0cc812d7
Binary files /dev/null and b/images/53_people.jpg differ
diff --git a/images/54_people.jpg b/images/54_people.jpg
new file mode 100644
index 00000000..a12991eb
Binary files /dev/null and b/images/54_people.jpg differ
diff --git a/images/55_people.jpg b/images/55_people.jpg
new file mode 100644
index 00000000..ee69fb72
Binary files /dev/null and b/images/55_people.jpg differ
diff --git a/images/56_people.jpg b/images/56_people.jpg
new file mode 100644
index 00000000..1e7f14fb
Binary files /dev/null and b/images/56_people.jpg differ
diff --git a/images/bg_visual.gif b/images/bg_visual.gif
new file mode 100644
index 00000000..79d0bdd6
Binary files /dev/null and b/images/bg_visual.gif differ
diff --git a/images/default (2).webp b/images/default (2).webp
new file mode 100644
index 00000000..7be2ebee
Binary files /dev/null and b/images/default (2).webp differ
diff --git a/images/default.webp b/images/default.webp
new file mode 100644
index 00000000..16949ba6
Binary files /dev/null and b/images/default.webp differ
diff --git a/images/follow_icon.png b/images/follow_icon.png
new file mode 100644
index 00000000..898ac4d3
Binary files /dev/null and b/images/follow_icon.png differ
diff --git a/images/gzd_logo.png b/images/gzd_logo.png
new file mode 100644
index 00000000..65255207
Binary files /dev/null and b/images/gzd_logo.png differ
diff --git a/images/ico_mobile_menu.png b/images/ico_mobile_menu.png
new file mode 100644
index 00000000..afb5ce66
Binary files /dev/null and b/images/ico_mobile_menu.png differ
diff --git a/images/ico_nav3.png b/images/ico_nav3.png
new file mode 100644
index 00000000..a272da61
Binary files /dev/null and b/images/ico_nav3.png differ
diff --git a/images/ico_nav4.png b/images/ico_nav4.png
new file mode 100644
index 00000000..ce4575f8
Binary files /dev/null and b/images/ico_nav4.png differ
diff --git a/images/ico_nav_sns1.png b/images/ico_nav_sns1.png
new file mode 100644
index 00000000..cc78dc6c
Binary files /dev/null and b/images/ico_nav_sns1.png differ
diff --git a/images/ico_nav_sns2.png b/images/ico_nav_sns2.png
new file mode 100644
index 00000000..e20251e9
Binary files /dev/null and b/images/ico_nav_sns2.png differ
diff --git a/images/ico_nav_sns3.png b/images/ico_nav_sns3.png
new file mode 100644
index 00000000..fe7d744b
Binary files /dev/null and b/images/ico_nav_sns3.png differ
diff --git a/images/ico_nav_sns4.png b/images/ico_nav_sns4.png
new file mode 100644
index 00000000..0763ec88
Binary files /dev/null and b/images/ico_nav_sns4.png differ
diff --git a/images/ico_nav_sns5.png b/images/ico_nav_sns5.png
new file mode 100644
index 00000000..872e7d94
Binary files /dev/null and b/images/ico_nav_sns5.png differ
diff --git a/images/ico_nav_srch.png b/images/ico_nav_srch.png
new file mode 100644
index 00000000..e6227e9e
Binary files /dev/null and b/images/ico_nav_srch.png differ
diff --git a/images/ico_top1.png b/images/ico_top1.png
new file mode 100644
index 00000000..a71213c7
Binary files /dev/null and b/images/ico_top1.png differ
diff --git a/images/ico_top2.png b/images/ico_top2.png
new file mode 100644
index 00000000..77260662
Binary files /dev/null and b/images/ico_top2.png differ
diff --git a/images/ico_top3.png b/images/ico_top3.png
new file mode 100644
index 00000000..a82cd674
Binary files /dev/null and b/images/ico_top3.png differ
diff --git a/images/ico_top4.png b/images/ico_top4.png
new file mode 100644
index 00000000..a27ff02a
Binary files /dev/null and b/images/ico_top4.png differ
diff --git a/images/img1_2.jpg b/images/img1_2.jpg
new file mode 100644
index 00000000..0d197d7b
Binary files /dev/null and b/images/img1_2.jpg differ
diff --git a/images/img1_3.jpg b/images/img1_3.jpg
new file mode 100644
index 00000000..4fee1336
Binary files /dev/null and b/images/img1_3.jpg differ
diff --git a/images/img1_4.jpg b/images/img1_4.jpg
new file mode 100644
index 00000000..9e5be7cc
Binary files /dev/null and b/images/img1_4.jpg differ
diff --git a/images/img1_5.jpg b/images/img1_5.jpg
new file mode 100644
index 00000000..e91a7d55
Binary files /dev/null and b/images/img1_5.jpg differ
diff --git a/images/img1_6.jpg b/images/img1_6.jpg
new file mode 100644
index 00000000..483f7f34
Binary files /dev/null and b/images/img1_6.jpg differ
diff --git a/images/img1_7.jpg b/images/img1_7.jpg
new file mode 100644
index 00000000..8c1a4f1c
Binary files /dev/null and b/images/img1_7.jpg differ
diff --git a/images/img3_1.jpg b/images/img3_1.jpg
new file mode 100644
index 00000000..2bde5301
Binary files /dev/null and b/images/img3_1.jpg differ
diff --git a/images/img3_2.jpg b/images/img3_2.jpg
new file mode 100644
index 00000000..100f57c1
Binary files /dev/null and b/images/img3_2.jpg differ
diff --git a/images/img3_3.jpg b/images/img3_3.jpg
new file mode 100644
index 00000000..186b0c5d
Binary files /dev/null and b/images/img3_3.jpg differ
diff --git a/images/img3_4.jpg b/images/img3_4.jpg
new file mode 100644
index 00000000..df8e4617
Binary files /dev/null and b/images/img3_4.jpg differ
diff --git a/images/img4_1.jpg b/images/img4_1.jpg
new file mode 100644
index 00000000..a7cbdfc1
Binary files /dev/null and b/images/img4_1.jpg differ
diff --git a/images/img4_2.jpg b/images/img4_2.jpg
new file mode 100644
index 00000000..66ccfb06
Binary files /dev/null and b/images/img4_2.jpg differ
diff --git a/images/img4_3.jpg b/images/img4_3.jpg
new file mode 100644
index 00000000..74099525
Binary files /dev/null and b/images/img4_3.jpg differ
diff --git a/images/sddefault.jpg b/images/sddefault.jpg
new file mode 100644
index 00000000..f8f14af4
Binary files /dev/null and b/images/sddefault.jpg differ
diff --git a/images/sns1.png b/images/sns1.png
new file mode 100644
index 00000000..1a6dd085
Binary files /dev/null and b/images/sns1.png differ
diff --git a/images/sns2.png b/images/sns2.png
new file mode 100644
index 00000000..638b2d0b
Binary files /dev/null and b/images/sns2.png differ
diff --git a/images/sns3.png b/images/sns3.png
new file mode 100644
index 00000000..9d94b4d3
Binary files /dev/null and b/images/sns3.png differ
diff --git a/images/sns4.png b/images/sns4.png
new file mode 100644
index 00000000..fd9df570
Binary files /dev/null and b/images/sns4.png differ
diff --git a/images/sns5.png b/images/sns5.png
new file mode 100644
index 00000000..b31c8fb5
Binary files /dev/null and b/images/sns5.png differ
diff --git a/images/sub_list_logo_black.png b/images/sub_list_logo_black.png
new file mode 100644
index 00000000..60a98ce8
Binary files /dev/null and b/images/sub_list_logo_black.png differ
diff --git a/images/sub_tit.png b/images/sub_tit.png
new file mode 100644
index 00000000..8085afa8
Binary files /dev/null and b/images/sub_tit.png differ
diff --git a/images/tit_rec.png b/images/tit_rec.png
new file mode 100644
index 00000000..925c21c1
Binary files /dev/null and b/images/tit_rec.png differ
diff --git "a/images/\353\213\244\354\232\264\353\241\234\353\223\234 (1).svg" "b/images/\353\213\244\354\232\264\353\241\234\353\223\234 (1).svg"
new file mode 100644
index 00000000..524d2e57
--- /dev/null
+++ "b/images/\353\213\244\354\232\264\353\241\234\353\223\234 (1).svg"	
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="36" viewBox="0 0 24 24" width="36" fill="#fff"><path d="M0 0h24v24H0z" fill="none" /><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z" /></svg>
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..13bf0a53
--- /dev/null
+++ b/index.html
@@ -0,0 +1,391 @@
+<!DOCTYPE html>
+<html lang="en">
+<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>월간공진단</title>
+
+  <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@100;300;400;500;700;900&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+  <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;900&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="./main.css">
+ 
+</head>
+ 
+<body>
+
+  <header>
+
+    <div class="page--top"></div>
+    <div class="page--back"></div>
+    <div class="page--bottom"></div>
+    <div class="page--right"></div>
+    <div class="page--left"></div>
+    
+    
+    <div class="inner">
+        <a href="/" class="inner--logo"><img src="./images/sub_list_logo_black.png"" alt="월간공진단"></a>
+        <ul class="inner--menu">
+          <li>
+            <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>
+          <li>
+            <a href="javascript:void(0)">풍류재담</a>
+          </li>
+          <li>
+            <a href="javascript:void(0)">연희살롱</a>
+          </li>
+        </ul>
+        <div class="material-icons">menu</div>
+      </div>
+  </header>
+
+  <!-- VISUAL -->
+  <section class="visual">
+      <ul class="visual--box">
+        <li>P E O P L E</li>
+        <li><img src="./images/sub_tit.png" alt="그들의 이력서"></li>
+        <li><div>점 긋고, 점 잇다<br>달음(Dal:um)</div></li>
+      </ul>
+  </section>
+
+<!-- CONTENT -->
+  <section class="content">
+    <div class="inner">
+      <p class="content--story">
+        점과 점이 이어져 하나의 선이 되듯<br>
+        가야금과 거문고라는 두 악기, 그리고<br>
+        두 사람이 만나 음악으로 공명한다.<br>
+        다르게 흐르던 시간은 맞물려 공존하고<br>
+        이제까지 존재하지 않았던 소리와 감각은<br>
+        그들의 손에서 손으로 끝없이 달음을 한다.
+      </p>
+    </div>
+  </section>
+
+<!-- DATA -->
+  <section class="data">
+    <div class="inner">
+      <div class="title">
+        <h4>Chapter 01</h4>
+        <h5 >신상털기</h5>
+      </div>
+      <div class="data--form">
+        <ul class="data--form__short">
+          <li class="label">이름</li>
+          <li class="info">달음(Dal:um)</li>
+          <li><div class="line"></div></li>
+        </ul>
+        <ul class="data--form__short">
+          <li class="label">결성일</li>
+          <li class="info">2018. 3</li>
+          <li><div class="line"></div></li>
+        </ul>
+      </div>
+      <div class="data--form__long">
+        <div class="label">특기/포지션</div>
+        <ul>
+          <li class="info">황혜영</li>
+          <li class="sub-info">거문고</li>
+          <li class="info">하수연</li>
+          <li class="sub-info">가야금</li>
+        </ul> 
+      </div>
+    </div>
+  </section>
+
+  <!-- ARTICLE -->
+  <main>
+    <div class="inner">
+
+      <div class="title">
+        <h4>Chapter 02</h4>
+        <h5 >인생이력</h5>
+      </div>
+
+      <article class="time-line">
+        <div class="time-line--date">
+          <div class="container">
+          <span class="item">2018</br>2019</br>2020</br>2021</br></span>
+          <span class="item">- - - - - - - - - - -</br>- - - - - - - - - - -</br>- - - - - - - - - - -</br>- - - - - - - - - - -</span>
+          <span class="item">'달음' 결성 ❬그- 달음으로❭</br>수림뉴웨이브 ❬음양, 완전한 균형❭</br>저니투코리안뮤직 저니루키 선정</br>❬음양시리즈 Ⅱ 공존 : 空存❭</span>
+          <span class="item"><br><br>2022</span>
+          <span class="item"><br><br>- - - - - - - - - - -</span>
+          <span class="item">1집 ❬Similar & Different❭ 발매</br>싱글 ❬달아가다❭ 발매</br>여우락 페스티벌 ❬두부의 달음❭</br>K-Music Festival 초청</span>
+          <span class="item"><br><br><br>2022</span>
+          <span class="item"><br><br><br>- - - - - - - - - - -</span>
+          <span class="item">사우스뱅크센터 공연과 유럽 투어미국 SXSW 공식 쇼케이스 초청</br>여우락 페스티벌 ❬네 개의 점 點❭</br>싱글 ❬Dot❭ 발매</br>2집 ❬Co-existence❭ 발매</span>
+          </div>
+        </div>
+        <div class="article--value__time-line">
+          <div class="article--value__time-line article--title">우리의변곡점</div>
+            <p class ="text">
+              <span class="name">혜영_</span> 가야금을 연주하시던 이모할아버지(최충웅) 덕분에 어렸을 때부터 자연스레가야금을 접했다. 부모님의 권유로 할아버지 밑에서 가야금을 6년 정도 배웠지만, 어딘가 모르게 나와는 잘 맞지 않는다고 느꼈다. 그러다 우연히 거문고 술대를 잡으면서 굉장히 색다른 기분이 들었고 연주가 재밌어졌다. 국립국악중학교 입학과 동시에거문고로 전공을 바꿨다. 그때부터 지금까지 오른손의 검지와 중지 사이에는 술대 자국이 붉게 새겨져 있다.  
+            </p>
+            <p class="text">
+              <span class="name">수연_</span> 9살에 방과 후 수업으로 가야금을 배우기 시작했는데, 처음엔 수업을 빠지기도 하면서 그다지 열성적이지 않았다. 그런데 3년쯤 지나자 실력이 늘어 공연하면 무대 중앙에 자리 잡아 주목받았고, 선생님도 음악에 재능이 있어 보인다는 얘기를 해주셨다. 조금씩 자신감을 얻었고 재미도 느끼며 입시까지 준비하게 됐고, 내 키보다 컸던 악기의 몸통이 어깨높이로 작아질 때까지 가야금과 함께하게 됐다.
+            </p>
+        </div>
+      </article>
+
+      <article class="article--value"> 
+        <div class="article--title">달음(Dal:um)</div>
+        <p class ="text">
+          <span class="name">혜영_</span>014년 서울시청소년국악단에서 수연을 처음 만났는데, 단원으로 활동하면서도 인사만 하는 사이였다. 그런데 2017년에 내가 악장을, 수연이 부악장을 맡으면서 음악적인 대화를 많이 나눴다. 같이 하는 것들이 서로에게 점차 익숙해지면서 이듬해 '달음'이라는 듀오를 결성하게 됐다. '어떤 행동의 여세를 몰아 계속해나간다'라는 뜻의 그룹명에는 음악 활동을 계속하며 앞으로 나아가 보자는 우리의 다짐이 담겨 있다.
+        </p>
+        <p class ="text">
+          <span class="name">수연_</span>듀오를 결성할 때 둘 다 창작 경험이 부족해서 작곡가 겸 기획자와 함께 해보면 어떨까 싶었다. 하지만 둘이서 일단 시작하고 보니 우리의 음악은 우리 두 사람의 연주 감각을 통해 만들어진다는 생각이 들었다. 당시에는 현악 실내악 또는 선생님들의 현악 앙상블 외에 거문고와 가야금만으로 이루어진 창작 작업이 없었기에 전통 현악기를 새로운 관점으로 보고 전에 없던 연주를 할 수 있겠다고 생각했다.
+        </p>
+      </article>
+
+      <article class="article--value__content"> 
+        <div class="article--title">Similar & Different</div>
+          <div class="video">
+            <iframe src="https://www.youtube.com/embed/hgQjayOp2PQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+            <p class="src">달음 '탈' ©Journey to Korean Music</p>
+          </div>
+        <p class="text">
+          '달음'의 첫 정규 음반 발매를 계획할 무렵, 마침 예술경영지원센터에서 운영하는 '저니투코리안뮤직(Journey to Korean Music)' 사업의 저니루키로 선정됐다. 해외 진출을 위한 미팅 과정에서 독일 글리터비트 레코즈(Glitterbeat Records)의 대표에게 음반 발매를 제안받았다. 데뷔한 지 3년 만인 2021년 초 녹음을 진행해 6월에 ❬Similar & Different❭를 전 세계에 동시 발매할 수 있었다. 이 음반은 가야금과 거문고의 비슷하면서도 다른 지점들을 탐구하고, 그간의 작업을 녹여낸 음반이라고 할 수 있다. 레코딩 디렉터인 박경소 가야금 연주가의 제안으로 둘이 동시에 녹음하게 됐는데, 서로의 연주 합을 맞추는 자연적이고 사실적인 분위기를 담아내고자 했다. 대신에 녹음 일부를 수정하고 싶을 때는 타협을 거쳐 처음부터 다시 녹음해야 해서 시간적으로나 체력적으로 까다로운 과정이기도 했다. 또한 연주자와 작곡가의 관점을 합쳐 두 현악기의 매력을 극대화하며 다양한 음악을 만들려고 신경 썼다. 특히 타이틀곡 '탈'은 최지운 작곡가와 협업한 곡으로 가야금을 12현에서 25현으로 바꾸고 수정을 반복하느라 작업 기간이 오래 걸렸지만, 작곡의 구성력과 악기적인 특성을 균형감 있게 살린 곡이다.
+        <p>  
+        </article>
+
+      <article class="article--value__content"> 
+        <div class="article--title">달아가다</div>
+          <div class="video__left">
+            <iframe src="https://www.youtube.com/embed/NhhUkucx3Ms" title="달음[Dalum] - 달아가다[Daragada] M/V (2018)" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+            <p class="src__left">'달아가다' ©달음</p>
+          </div>
+        <p class="text">
+          2018년에 나온 곡인데 1집 음반에 수록할지를 고민하다가, 정규 음반에는 가야금과 거문고로만 구성된 곡을 넣고 싶어서 따로 싱글 음반을 발매했다. 산조는 전통 현악기 연주자들이 중요하게 생각하는 장르이다. 우리의 산조가 누구에게나 편하게 들리길 바라는 마음으로, 최옥삼류 가야금 산조와 신쾌동류 거문고 산조의 긴 산조 가락을 엮어 기타와 함께 재구성했다. 최덕렬 작곡가는 처음에 곡의 의도를 듣고 무척 어려워했다. 하지만 "그게 쉬운 일이었다면, 그 속에서 아무런 즐거움도 얻을 수 없었을 것이다. 그러니 계속 그림을 그려야겠다"라는 고흐(Vincent van Gogh)의 글귀를 인용해, 음악이 우리에게 어떤 의미인지를 전달하자 공감하며 곡을 완성해냈다. 호흡과 장단의 음악인 산조를 기타와 함께 서양음악처럼 합주하는 건 생각보다 꽤 힘든 일이었고, 같은 선율을 거문고와 가야금으로 합주하거나 각각의 산조를 다른 악기로 연주하는 건 만만치 않은 일이었다. 하지만 고흐의 말대로 어려움 속에 즐거움도 많았다. 무엇보다 앞으로 우리가 만들 음악에 대한 기대를 품게 만든 곡이기도 하다.
+        <p>  
+      </article>
+
+      <article class="article--value__content"> 
+        <div class="article--title">기억에 남는 무대</div>
+          <div class="img">
+            <img src="./images/img1_2.jpg" alt="❬두부의 달음❭, ❬네 개의 점 點❭ ©국립극장">
+            <p class="src"> ❬두부의 달음❭, ❬네 개의 점 點❭ ©국립극장</p>
+          </div>
+          <p class="text">
+          '2021 여우락 페스티벌'에서 선보인 ❬두부의 달음❭은 신선한 경험이었다. 이 공연은 연주자가 직접 두부를 만들면서 연주하는 프로젝트로, 실제로 유럽 등에서 '두부 프로젝트'를 진행해오던 박우재 디렉터의 아이디어로 기획됐다. 그는 '달음'의 음악적 색깔이 두부가 만들어지는 느림의 미학과 잘 어울린다고 말했다. 우리는 두부를 만들며 연주하기를 약 한 달 동안 연습했고, 무대에서 관객들의 오감을 자극하며 두부에서 영감을 받은 곡도 선보일 수 있었다. '2022 여우락 페스티벌'에서 공연한 ❬네 개의 점 點❭은 같은 악기 편성이지만 전혀 다른 음악색과 창작 방식을 지닌 '리마이더스'와 작업하면서 또 다른 시선으로 악기적 특색과 조화를 이뤄낸 시간이었다. 한편 'K-Music Festival'의 초청으로 런던 사우스뱅크센터에서 펼친 무대는 현지 관객의 뜨거운 반응과 「송라인즈(Songlines)」 등 해외 매체의 호평에 힘입어 유럽 투어를 이어가게 만든 첫 해외 공연이라 더욱 의미가 깊다.
+        <p>  
+      </article>
+
+      <article class="article--value__content"> 
+        <div class="article--title">Co-existence</div>
+          <div class="img__left">
+            <img src="./images/img1_7.jpg" alt="❬두부의 달음❭, ❬네 개의 점 點❭ ©국립극장"> 
+            <p class="src__left">❬Co-existence❭ ©김재우</p>
+          </div>
+          <p class="text">
+          지난해 12월 서울돈화문국악당에서 '공존(共存)'을 주제로 쇼케이스를 열었는데, 팬데믹이라는 혼란스러운 시기를 겪으며 고민한 '같이의 가치'에 대해 되돌아보는 무대였다. 2집 음반 ❬Co-existence❭는 올해 9월쯤에 발매될 예정이다. 음반 제목에서도 알 수 있듯이, 이번 음반에는 나와 너라는 존재 그리고 우리가 함께 살아가는 것에 대한 이야기를 담았다. 1집 음반과 달리 전곡을 직접 작곡함으로써 '달음'의 세계관이 잘 드러나는 작품이다. 타이틀곡 'Dot'은 지속음이 짧아 '점' 악기로 불리는 가야금과 거문고의 특성에 기반한 곡으로, 앞으로 나아가는 점들이 모이고 펼쳐지는 모습을 그려냈다. 또한 '살아있는'이라는 곡에서는 거문고 연주에 활 주법을 연구해 사운드 질감을 풍부하게 만들려고 노력했다. 'Pandemonium', '도드리', 'Poison and Antidote', 'In the Deep (with Y.Sookyoung)' 등 지난 쇼케이스에서 공개한 곡 외에도 몇 곡을 더해 수록할 계획이다. 누구나 공감할 수 있는 관계에 대한 고민, 사람과의 조화, 삶에 관해 표현한 곡들을 들으며 살아있음에 대해 생각해보면 좋겠다.
+        <p>  
+        </article>
+
+      <article class="article--value"> 
+        <div class="article--title">우리의 음악 세계</div>
+        <p class="text">
+          우리는 국악기를 연주하지만, 장르에 갇히지 않고 사람들의 감각을 일깨울 수 있는 음악을 하고 싶다. 그동안 거문고와 가야금의 고유한 매력으로 음악에 다가갔고, '달음'이 두 연주자의 조합이어야 하는 이유를 찾으며 스스로 '음양'과 '공존'이라는 화두를 던졌다. 지금까지 서로의 다름을 알아보고 균형을 맞추기 위해 서로에게 거울이 되는 시간을 거쳤다면, 이제는 고개를 들어 세상을 보려 한다. 그리고 다양한 사람들과 어울리며 살아가는 삶과 음악으로 한 걸음 나아가고 싶다
+        </p>
+      </article>
+
+      <!-- CHAPTER3 -->
+      <div class="title--line"></div>
+      <div class="title">
+        <h4>Chapter 03</h4>
+        <h5 >개인 취향</h5>
+      </div>
+
+      <article class="article--value"> 
+        <div class="article--title">캐릭터 & 포지션</div>
+        <p class="text">
+          <span class="name">혜영_</span>STP와 ISTJ를 왔다 갔다 하는데, 아마도 수연과 함께할 때 일정 관리 면에서 좀 더 계획적으로 움직여서 그런듯하다. 빠른 일 처리를 원하지만 말수가 적어서일까. 둘 다 내향적이지만 내가 더 조급한 성격이면서도 차분한 편이다. 작업에 있어서는 보통 수연이 아이디어를 내면 내가 가지치기해서 발전시키곤 한다. 다행히 같은 T여서 서로 공감받지 못해 서운한 일은 없다.
+        </p>
+        <p class="text">
+          <span class="name">수연_</span>INTP라서 사실과 경험에 초점을 맞추는 혜영과 다르다고 느낄 때가 많다. 특히 대화할 때 둘의 차이가 두드러지는데, 내가 영감에 의존해서 설명하면 혜영은 모호하게 들린 부분에 대해 다시 구체적으로 얘기해달라고 한다. 성향은 다르지만 취향이 비슷해서 서로가 생각하는 음악적 분위기가 맞고, 그때그때 하고 싶은 것들이 잘 통하는 것 같다.
+        </p>
+        </article>
+
+      <article class="article--value"> 
+        <div class="article--title">영감의 원천</div>
+        <p class="text">
+          <span class="name">혜영_</span>작업의 모티브는 다양하다. 길을 걷거나 음악을 듣는 등 일상적인 것에서 자극을 많이 받고, 하고 싶은 이야기가 갑자기 떠오르곤 한다. 그래서 해보고 싶은 음악이 많은데, 혜영과 자주 대화하고 생각을 공유하며 음악을 만들고 있다. 일례로 2집 음반의 수록곡인 'Pandemonium'은 록 밴드 공연을 보고, 우리도 록 음악에 담긴 사납고 혼란스러운 정서를 표현해보자는 생각으로 나름의 거친 사운드를 낼 수 있는 방법을 찾다가 만든 곡이다. 롤 모델은 박경소 가야금 연주가이다. 그가 연주하는 음색은 물론 가야금의 특성을 드러내면서도 현대적인 음악을 창작하는 역량을 좋아한다. 최근에는 필립 글래스(Philip Glass)나 막스 리히터(Max Richter) 같은 작곡가의 미니멀리즘 음악을 들으면서 영감을 얻기도 한다.
+        </p>
+        <p class="text">
+          <span class="name">수연_</span>어떤 주제가 있으면 관련된 정보를 깊이 파면서 떠오르는 생각들을 이미지화한다. 창작의 이유를 분명히 이해해야 음악으로 소화해낼 수 있는 편. 거문고보다는 다른 악기, 미술 전시 같은 다른 예술 장르에서 오는 자극을 크게 느낀다. 창작할 때는 서로가 받아들이는 범위에서 여러 갈래를 만들어 좋은 것을 선택하려고 하는데, 손에 익은 주법에만 얽매이지 않으려고 주로 사보 프로그램을 사용해 작업한다. 그러나 곡의 콘셉트에 따라 여러 작업 방식을 취하고 있다.
+        </p>
+        </article>
+
+      <article class="article--value__short">
+        <div class="article--value__short-form">
+          <div class="article--title">취미 생활</div>
+            <p class="text short">
+              <span class="name">수연_</span> 쉬는 동안에 일주일은 가볍게 두문불출할 수 있는 '집순이'다. 이미 쉬고 있지만 더 격렬하게 쉬기 위해 아무것도 하지 않는 게 좋다. 그러다 심심하면 손만 까닥해서 유튜브·넷플릭스 영상을 보거나 좋아하는 음악을 듣는다.
+            </p>
+            <p class="text__short">
+              <span class="name">혜영_</span> 취미는 꽂히는 게 있을 때마다 다르다. 해외 투어 전에는 종목을 바꿔가며 운동을 즐겼다. 여행을 좋아해서 떠나야 할 때라는 느낌이 들면 오래 생각하지 않고 바로 떠난다. 혼자서도 잘 돌아다니고 캠핑을 하기도 한다. 연습실이 지하라 탁 트인 곳에서 기분을 환기하는 것 같다  
+            </p>
+        </div>
+        <div class="article--value__short-form">
+          <div class="article--title">추천할 만한</div>
+            <p class="text short">
+              <span class="name">혜영_</span> 여행을 추천한다. 무엇에도 얽매이지 않고 어디론가 향하고 싶은 마음대로 움직여보는 것이다. 여행지에서는 시장을 즐겨 다니는데, 지역만의 독특한 분위기를 느끼고 사람들의 모습을 구경하는 재미가 있다. 사람 많은 곳으로 따라가다 알게 된 맛집도 좋아한다.  
+            </p>
+            <p class="text">
+              <span class="name">수연_</span> 운동을 아예 안 했는데 살기 위해 필라테스를 시작했다. 악기를 오래 연주하다 보니 자세가 틀어진 곳이 많아서 교정을 하는 셈이다. 전과 비교해 확실히 몸속이 제대로 채워졌다는 느낌이 든다. '최애 루틴'은 오전에 운동을 끝내고 아이스 라떼 한 잔을 마시는 것.
+            </p>
+        </div>
+      </article> 
+
+        <!-- CHAPTER4 -->
+      <div class="title--line"></div>
+      <div class="title">
+        <h4>Chapter 04</h4>
+        <h5 >현재의 만족도</h5>
+      </div>
+
+      <article class="article--value"> 
+        <div class="article--title">현재의 만족도</div>
+        <div class="img">
+          <img src="./images/img1_2.jpg" alt="❬두부의 달음❭, ❬네 개의 점 點❭ ©국립극장">
+        </div>
+        <div class="article--vlaue__midle">
+          <p class="text">
+            <span class="name">혜영_</span>STP와 ISTJ를 왔다 갔다 하는데, 아마도 수연과 함께할 때 일정 관리 면에서 좀 더 계획적으로 움직여서 그런듯하다. 빠른 일 처리를 원하지만 말수가 적어서일까. 둘 다 내향적이지만 내가 더 조급한 성격이면서도 차분한 편이다. 작업에 있어서는 보통 수연이 아이디어를 내면 내가 가지치기해서 발전시키곤 한다. 다행히 같은 T여서 서로 공감받지 못해 서운한 일은 없다.
+          </p>
+          <p class="text">
+            <span class="name">수연_</span>10점 만점에 7점. 음악을 만들 때는 이렇게 살아도 되나 싶은 정도로 고통을 느끼다가, 막상 지난한 과정이 끝나고 공연에서 좋은 반응을 얻으면 언제 그랬냐는 듯이 힘든 일들이 한 번에 보상받는 기분이다. 얼마 전에 중요한 작업을 다 끝내면서 체력적으로도 정신적으로도 소모가 컸지만, 결국 해냈다는 성취감과 더불어 내가 조금 더 성장했다고 느낀다. 내가 느끼는 걸 음악으로 표현할 수 있는 것만으로도 참 감사한 일이다. 이런 시간을 되풀이하며 고통과 기쁨 사이에서 만족감의 적정선을 찾는 게 예술가의 삶인 듯싶다.
+          </p> 
+        </div>
+      </article>
+
+      <div class="article--value"> 
+        <div class="article--title">전통의 한계와 가능성</div>
+        <p class="text">
+          <span class="name">수연_</span>거문고는 묵직한 저음과 술대를 이용한 스트라이킹에서 오는 쾌감이, 가야금은 고운 음색을 바탕으로 섬세함과 대담함을 오가는 변화무쌍함이 매력적인 악기다. 두 악기 모두 부드러운 음악부터 강렬한 음악까지 다채롭게 표현할 수 있어 '달음'의 음악도 감성적인 동시에 파워풀한 특색을 지닌다. 다만 12현 가야금은 거문고보다 음량이 작고 25현 가야금은 음량이 커서 마이크가 없는 공연장에서는 서로의 호흡과 소리를 좇으려 노력한다.
+        </p>
+        <p class="text">
+          <span class="name">혜영_</span>처음 창작할 때는 거문고와 가야금이 한계가 많다고 생각해 두려움 반 설렘 반이었다. 지금은 오랜 편견을 깨고 새로운 감동을 줄 수 있는 조합이라고 느껴진다. 팀을 결성할 당시에 주변에서 "두 악기로 다양한 장르를 다 해볼 수 있겠다"라는 말을 들어도 와 닿지 않았는데, 작업을 하나씩 해나갈수록 뭐든 만들 수 있겠다는 가능성을 봤다.
+        </p> 
+      </div>
+
+      <article class="article--value"> 
+        <div class="article--title">계획 그리고 희망 사항</div>
+        <p class="text">
+          듣기 좋은 음악, 들으면 계속 찾게 되는 음악을 만들고 싶다. 실험적이고 독특한 사운드를 음악에 접목할 수도 있지만, 악기의 정체성을 유지하며 가야금과 거문고의 매력을 진하게 맛볼 수 있는 음악을 꾸준히 만들고 싶다. 2집 음반 발매에 앞서 수록곡 가운데 'Dot'을 1월에 싱글 음반으로 발매하고, 'Pandemonium'의 뮤직비디오도 선보일 예정이다. 6월부터 9월까지는 다양한 국가와 공연장의 해외 투어를 계획 중이라 우리의 전통 현악기가 낯선 관객들과 만날 기회가 늘 것 같다
+        </p>
+      </article>
+
+      <article class="article--value"> 
+        <div class="article--title">우리의 키워드</div>
+        <div class="keyword">
+          <div>
+            <div class="point">음양</div>
+            <div>Dot</div>
+            <div>Co-existence</div>
+          </div>
+          <div>
+            <div>산조</div>
+            <div class="point">거문고</div>
+            <div>여성 듀오</div>
+          </div>
+          <div>
+            <div>점</div>
+            <div>탈</div>
+            <div class="point">가야금</div>
+          </div>
+          <div>
+            <div class="point">공존</div>
+            <div>달아가다</div>
+            <div>조화</div>
+          </div>
+        </div>
+      </article>
+
+      <div class="video-content">
+        <img src="./images/tit_rec.png" alt="공진단REC" />
+        <p>공진단 REC• 는 공진단의 처방으로 복용하는 예술로, 매월 다양한 예술인들의 인터뷰와 라이브 공연을 만나실 수 있습니다!</p>
+      </div>
+      
+      <div class="list">
+        <div class="before">
+          <a href="javascript:void(0)"> < 이전 글</a>
+          <p class="list-font">[현상진맥] 전통 공연·음반 트렌드 2022년은 뭘까용?</p>
+        </div>
+        <div class="list-menu">
+          <div> 아카이브보기</div>
+          <a href="javascript:void(0)"><div class="material-icons">menu</div></a>
+        </div>
+        <div class="after">
+          <a href="javascript:void(0)">다음 글 > </a>
+          <p class="list-font">[풍류재담] 다시, 심청가 ② 젖동냥하는 가나다라마바</p>
+        </div>
+      </div>
+      <div class="list-more">
+        <div># 관련된 다양한 기사 글</div>
+        <ul>
+          <div class="list-container">
+            <img src="./images/56_people.jpg" alt="굿+록? Good Luck! 드러머·보컬 김반장" />
+            <div><p>굿+록? Good Luck!<br>드러머·보컬 김반장</p></div>
+          </div>
+          <div class="list-container">
+            <img src="./images/55_people.jpg" alt="피리로 다시 만난 세계 삐리뿌(BBIRIBBOO)" />
+            <div><p>피리로 다시 만난 세계<br>삐리뿌(BBIRIBBOO)</p></div>
+          </div>
+          <div class="list-container">
+            <img src="./images/54_people.jpg" alt="점 긋고,점 잇다 달음(Dal:um)" />
+          <div><p>점 긋고,점 잇다<br>달음(Dal:um)</p></div>
+          </div>
+        </ul>
+      </div> 
+
+    </div>
+
+    <div class="newsletter">
+      <div class="inner">
+        <p>정기구독을 신청하시면 매달 이메일로 뉴스레터가 발송됩니다</p>
+        <button type="button">정기구독 신청하기<div class="material-icons">arrow_right_alt</div></button> 
+      </div>
+    </div>
+
+    <div class="footer">
+      <div class="inner">
+        <ul>
+          <img src="./images/gzd_logo.png" alt="전통공연예술진흥재단" />
+          <li>
+            <img src="./images/sns1.png" alt="facebook">
+            <img src="./images/sns2.png" alt="instagrem">
+            <img src="./images/sns3.png" alt="blog">
+            <img src="./images/sns4.png" alt="youtube">
+            <img src="./images/sns5.png" alt="naver">
+          </li>
+        </ul>
+        <span>
+          발행인 김삼진 | 편집부장 전국은 | 편집팀장 심재흥 | 기획 박혜주·이정하 | 아트디렉터 이슬 | 사진 김태화 | 편집실 대외협력팀 02-580-3282 | webzine@kotpa.org | 06757 서울특별시 서초구 서초동 남부순환로 2364 국악연수관 1층
+        </span>
+        <div class="f1">
+          Copyright 2023 Korean Traditional Performing Arts Foundation. All Rights Reserved.
+        </div>
+      </div>
+    </div>
+
+    
+  </main> 
+      
+</body>
+</html>
\ No newline at end of file
diff --git a/main.css b/main.css
new file mode 100644
index 00000000..4d9223d4
--- /dev/null
+++ b/main.css
@@ -0,0 +1,632 @@
+/* COMMON */
+:root {
+  --brown: #705027;
+  --page: rgb(84, 83, 82);
+}
+body {
+  font-size: 16px;
+  font-weight: 300;
+  line-height: 1.4;
+  font-family: 'Noto Sans KR', sans-serif;
+  width: 100%;
+  height: auto;
+}
+image {
+  display: block;
+}
+a {
+  text-decoration: none;
+}
+.text {
+  color: var(--brown);
+  font-size: 17px;
+  font-weight: 300;
+  line-height: 1.8;
+  text-align: justify;
+}
+.inner {
+  width: 100%;
+  margin: auto;
+}
+.title {
+  display: flex;
+  align-items: center;
+  font-size: 26px;
+}
+.title h4 {
+  font-weight: 700;
+}
+.title h5 {
+  font-weight: 100;
+  margin-left: 10px;
+}
+.label {
+  font-size: 17px;
+  font-weight: 500;
+  margin-bottom: 13px;
+ }
+.info {
+   font-size: 25px;
+   font-weight: 700;
+   margin-bottom: 20px;
+}
+.sub-info {
+   font-size: 25px;
+   font-weight: 400;
+   margin-bottom: 20px;
+   display: inline-block;
+}
+.name {
+  color: var(--brown);
+  font-size: 17px;
+  font-weight: 700;
+  margin-right: 8px;
+}
+
+/* HEADER */
+header {
+  width: 100%;
+  height: 8000px;
+  position: fixed;
+  top: 0;
+  z-index: 1;
+}
+.page--back {
+  width: 100%;
+  height: 90px;
+  top: 30px;
+  background-color: #fff;
+  position: fixed;
+  box-shadow: 4px 4px 10px rgba(65, 58, 40, 0.15);
+}
+.page--top {
+  width: 100%;
+  height: 30px;
+  top: 0;
+  position: fixed;
+  background-color: var(--page);
+}
+.page--right {
+  width: 30px;
+  height: 8000px;
+  right: 0;
+  position: fixed;
+  background-color: var(--page);
+}
+.page--left {
+  width: 30px;
+  height: 8000px;
+  position: fixed;
+  background-color: var(--page);
+}
+.page--bottom {
+  width: 100%;
+  height: 30px;
+  bottom: 0;
+  position: fixed;
+  background-color: var(--page);
+}
+header .inner {
+  height: 90px;
+  display: flex;
+  align-items: center;
+  position: relative;
+  top: 30px;
+  margin: 0;
+}
+.inner--logo {
+  height: 90px;
+  position: absolute;
+  top: 0;
+  left: 30px;
+  margin-top: 19px;
+  margin-left: 30px;
+}
+.inner--logo img {
+  width: 127px;
+}
+.inner--menu {
+  flex-shrink: 0;
+  right: 0;
+  left: 0;
+  align-items: center;
+  position: absolute;
+  display: flex;
+  justify-content: center;
+}
+.inner--menu li {
+  position: relative;
+}
+.inner--menu li a {
+  font-size: 16px;
+  font-weight: 400;
+  padding: 0 17px;
+  color: #302e2e;
+  display: block;
+  cursor: pointer;
+}
+.inner--menu li a:hover {
+  font-size: 16px;
+  font-weight: 700;
+  padding: 0 17px;
+  color: #3c2503;
+  display: block;
+  position: relative;
+  top: 16px;
+}
+header .material-icons {
+  font-size: 34px;
+  color: #3c3733;
+  position: absolute;
+  top: 0;
+  right: 0;
+  margin-top: 26px;
+  margin-right: 60px;
+  cursor: pointer;
+}
+
+
+/* VISUAL */
+.visual {
+  width: 100%;
+  height: 470px;
+  top: 120px;
+  display: flex;
+  justify-content: center;
+  position: relative;
+  background-position: top;
+  background-image: url("../images/bg_visual.gif");
+}
+.visual--box {
+  color: #fff;
+  padding: 90px;
+  text-align: center;
+  justify-content: center;
+}
+.visual--box li:nth-child(1) {
+  font-size: 19px;
+  font-weight: 300;
+  margin-bottom: 25px;
+}
+.visual--box li img {
+  width: 220px;
+  margin-bottom: 40px;
+
+}
+.visual--box > li:nth-child(3) {
+  font-size: 40px;
+  font-weight: 400;
+}
+
+
+/* CONTENT */
+.content {
+  top: 120px;
+  position: relative;
+  text-align: center;
+}
+.content .inner {
+  width: 1000px;
+  padding: 70px 0;
+  border-bottom: 2px solid var(--brown);
+  box-sizing: border-box;
+}
+.content--story {
+  color: var(--brown);
+  font-size: 26px;
+  font-weight: 300;
+  line-height: 1.8;
+  letter-spacing: .4px;
+}
+
+
+
+/* DATA */
+.data {
+  font-family: 'Noto Sans KR', sans-serif;
+  color: var(--brown);
+  top: 120px;
+  position: relative;
+  margin-top: 20px;
+  height: 400px;
+}
+.data .inner {
+  width: 1000px;
+  height: 400px;
+  border-bottom: 2px solid var(--brown);
+}
+.data--form {
+  margin-top: 70px;
+  display: flex;
+  justify-content: space-between;
+}
+.data--form__short {
+  margin-bottom: 30px;
+  width: 470px;
+  border-bottom: 1px dashed var(--brown);
+}
+.data--form__long {
+  margin-right: 40px;
+  margin-bottom: 30px;
+  width: 1000px;
+  border-bottom: 1px dashed var(--brown);
+}
+.data--form__long ul {
+  display: flex;
+  justify-content: space-between;
+  width: 310px;
+}
+.data--form__long li:nth-child(2)::after {
+  content: "";
+  display: inline-block;
+  width: 3px;
+  height: 18px;
+  background-color: var(--brown);
+  position: relative;
+  right: -5px;
+  
+}
+
+
+/* ARTICLE TIME LINE */
+main {
+  font-family: 'Noto Sans KR', sans-serif;
+  top: 140px;
+  position: relative;
+  color: var(--brown);
+}
+main .inner {
+  width: 1000px;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+.time-line {
+  margin-top: 70px;
+  display: flex;
+  position: relative;
+}
+.time-line--date {
+  width: 370px;
+  height: 390px;
+  background-color: var(--brown);
+}
+.time-line--date .container {
+  padding: 17px 14px;
+  width: auto;
+  display: grid;
+  grid-template-columns: 45px 100px 200px;
+  grid-template-rows: 108px;
+}
+.time-line--date .item{
+  color: #fff;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.9;
+}
+.article--value__time-line {
+  top: 0;
+  right: 0;
+  position: absolute;
+  width: 600px;
+}
+
+/* ARTICLE */
+.article--title {
+  position: relative;
+  height: 37px;
+  margin-bottom: 12px;
+  font-size: 19px;
+  font-weight: 500;
+  border-bottom: .5px solid var(--brown);
+}
+.article--value {
+  margin-top: 70px;
+}
+
+.article--value__content {
+  margin-top: 70px;
+  text-align: justify;
+}
+.video {
+  width: 260px; 
+  height: 150px;
+  float: right;
+  margin: 10px 0 5px 20px;
+  overflow: hidden;
+}
+.src {
+  font-size: 12px;
+  position: absolute;
+  right: 0;
+}
+.video__left {
+  width: 260px; 
+  height: 150px;
+  float: left;
+  margin: 10px 20px 5px 0;
+  overflow: hidden;
+}
+.src__left {
+  font-size: 12px;
+  position: absolute;
+  left: 0;
+}
+.img {
+  width: 260px; 
+  height: 180px;
+  float: right;
+  margin: 10px 0 5px 20px;
+  overflow: hidden;
+}
+.img img {
+  width: 260px;
+  height: auto;
+  object-fit: cover;
+}
+.img__left {
+  width: 260px; 
+  height: 180px;
+  float: left;
+  margin: 10px 20px 5px 0;
+  overflow: hidden;
+}
+.img__left img {
+  width: 260px;
+  height: auto;
+  object-fit: cover;
+}
+
+
+/* Chapter3 */
+.title--line {
+  height: 20px;
+  margin-top: 70px;
+  border-top: 2px solid var(--brown);
+}
+
+.article--value__short {
+  margin-top: 70px;
+  justify-content: space-between;
+  display: flex;
+}
+.article--value__short-form {
+  width: 470px
+}
+.article--vlaue__midle {
+  width: 710px;
+}
+.keyword {
+  font-family: 'Nanum Myeongjo', serif;
+  font-size: 23px;
+  font-weight: 200;
+  width: 1000px;
+  display: flex;
+  color: rgb(199, 167, 125);
+}
+.keyword div {
+  width: 180px;
+  margin-right: 80px;
+  line-height: 1.8;
+}
+.keyword div.point {
+  width: 180px;
+  margin-right: 80px;
+  line-height: 1.8;
+  color: var(--brown);
+}
+.video-content {
+  margin-top: 70px;
+  width: 1000px;
+  height: 600px;
+  background-color: rgb(244, 224, 195);
+  position: relative;
+}
+.video-content img {
+  width: 200px;
+  position: absolute;
+  top: 60px;
+  left: 0;
+  right: 0;
+  margin: auto;
+}
+.video-content p {
+  font-size: 16px;
+  color: var(--brown);
+  position: absolute;
+  text-align: center;
+  top: 140px;
+  left: 0;
+  right: 0;
+  margin: auto;
+}
+.list {
+  margin-top: 110px;
+  width: 1000px;
+  height: 80px;
+  position: relative;
+  display: flex;
+  background-color: #fff;
+  border-top: 1px solid #333;
+  border-bottom: 1px solid #333;
+  font-size: 14px;
+  font-weight: 400;
+  color: #444;
+  line-height: 2;
+  cursor: pointer;
+}
+.list .before {
+  width: 280px;
+  background-color: #f7f7f7;
+  left: 0;
+  text-align: right;
+  display: block;
+  padding: 15px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.list .list-menu {
+ width: 440px;
+ text-align: center;
+ display: block;
+ padding: 15px;
+}
+.list .after {
+  width: 280px;
+  background-color: #f7f7f7;
+  right: 0;
+  padding: 15px;
+  text-align: left;
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+p.list-font {
+  font-size: 14px;
+  font-weight: 400;
+  display: inline;
+}
+.list a {
+  color: #444;
+  font-size: 12px;
+  font-weight: 500;
+  display: block;
+}
+.list .material-icons {
+  font-size: 19px;
+  color: #3c3733;
+  margin-top: 4px;
+}
+.list-more {
+  margin-top: 70px;
+  position: relative;
+}
+.list-more div {
+  font-size: 20px;
+  font-weight: 700;
+  color: #222;
+}
+.list-more ul {
+  margin-top: 10px;
+  display: flex;
+  justify-content: space-between;
+} 
+.list-more ul .list-container {
+  width: 323px;
+  height: 240px;
+  overflow: hidden;
+  position: relative;
+}
+.list-more ul .list-container:hover {
+  width: 323px;
+  height: 240px;
+  overflow: hidden;
+  position: relative;
+}
+.list-more ul .list-container img {
+  width: 323px;
+  height: auto;
+  position: absolute;
+}
+.list-more ul .list-container div {
+  height: 60px;
+  width: 100%;
+  background-color: #fff;
+  border: 1px solid #333;
+  color: #222;
+  bottom: 0;
+  position: absolute;
+  box-sizing: border-box;
+}
+.list-more ul .list-container div p {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.4;
+  padding: 10px;
+}
+
+.newsletter {
+  margin-top: 70px;
+  width: 100%;
+  height: 130px;
+  bottom: 0;
+  background-color: #222;
+  position: relative;
+}
+.newsletter .inner {
+  width: 1000px;
+  height: 130px;
+}
+.newsletter .inner p {
+  height: 46px;
+  color: #b3b3b3;
+  font-size: 23px;
+  font-weight: 400;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  margin: auto 0;
+  position: absolute;
+}
+.newsletter button {
+  color: #fff;
+  font-size: 23px;
+  font-weight: 400;
+  height: 55px;
+  width: 270px;
+  text-align: left;
+  padding: 0 25px;
+  background-color: transparent;
+  border: 1px solid #fff;
+  box-sizing: border-box;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto 0px;
+  position: absolute;
+}
+.newsletter button .material-icons {
+  font-size: 40px;
+  width: 20px;
+  top: 5px;
+  margin-left: 20px;
+  position: absolute;
+}
+.footer {
+  width: 100%;
+  height: 180px;
+  background-color: #e6e6e6;
+  position: relative;
+}
+.footer .inner {
+  width: 1000px;
+  height: 180px;
+}
+.footer ul {
+ padding-top: 35px;
+  display: flex;
+}
+.footer .inner img {
+  width: 200px;
+}
+.footer .inner ul li {
+  position: absolute;
+  right: 0;
+}
+.footer .inner ul li img {
+  width: 30px;
+  margin-left: 20px;
+}
+.footer span {
+  display: block;
+  margin-top: 25px;
+  color: #444;
+  font-size: 10px;
+}
+.footer div {
+  display: block;
+  color: #666;
+  font-size: 3px;
+}
\ No newline at end of file