diff --git a/README.md b/README.md
index 598dc30f..1a05c294 100644
--- a/README.md
+++ b/README.md
@@ -1,45 +1,166 @@
-# 👀 자신이 원하는 사이트 레이아웃 클론
+# innisfree 홈페이지 클론코딩
+<br>
 
-원하는 사이트(페이지)를 자유롭게 선택하고 레이아웃을 클론 코딩하세요.  
-평소에 도전해 보고 싶었거나 혹은 자신의 수준에 맞는 사이트(페이지)를 선택하세요.   
-과제 수행 및 리뷰 기간은 별도 공지를 참고하세요!
+> 배포 결과물  
+https://innisfree-clone-coding.netlify.app/
 
-## 과제 수행 및 제출 방법
+<br>
 
-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://www.innisfree.com/kr/ko/Main.do
 
-- `main` 혹은 다른 사람의 브랜치로 절대 병합하지 않도록 주의하세요!
-- Pull Request에서 보이는 설명을 다른 사람들이 이해하기 쉽도록 꼼꼼하게 작성하세요!
-- Pull Request에서 과제 제출 후 절대 병합(Merge)하지 않도록 주의하세요!
-- 과제 수행 및 제출 과정에서 문제가 발생한 경우, 바로 담당 멘토나 강사에서 얘기하세요!
+<br>
+---
 
-## 필수 요구사항
 
-- [ ] 과제에 대한 설명을 포함한 `README.md` 파일을 제공하세요!
-- [ ] 과제 결과와 비교할 수 있는 실제 사이트(페이지)의 주소를 명시하세요!
-- [ ] 과정에서 사용한 프로젝트 폴더/파일이 모두 포함돼야 합니다, 일부 파일만 제출하지 마세요! 
-- [ ] 실제 서비스로 배포하고 접근 가능한 링크를 추가해야 합니다.
 
-## 선택 요구사항
+<br>
 
-- [ ] `<header>`, `<section>` 등 시멘틱 태그를 최대한 활용해보세요.
-- [ ] 실제 사이트의 레거시 코드 활용보단 최신의 CSS Flex 혹은 Grid 등을 활용해보세요.
-- [ ] 부분적으로 BEM 방법론을 도입해보세요.
-- [ ] JS가 필요한 부분은 되도록 생략하되 이유를 명시해보세요.(CSS로 대체 가능한지 피드백이 있을 수 있겠죠?!)
-- [ ] JS가 필요한 부분 중 구현할 부분이 있다면 자유롭게 구현해보세요.(JS 과제가 아니니까 가볍게 구현하시길 추천해요)
-- [ ] SCSS 등의 CSS 전처리도구를 도입해보세요.
-- [ ] SCSS 컴파일에 Webpack이나 Parcel 같은 번들러를 활용해보세요.
+### CDN
+  1. `Swiper`  
+```html
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/9.1.1 swiper-bundle.min.js" integrity="sha512-J0i98QZsJc12MkNEyDbinrKKoe7Jiw0rtryAXBesZrVwRkaqgP9QNCPyo5sMZ2jfiJQb+9RIE4I3xNl8fFqQIA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>  
+``` 
 
-## 손쉬운 이미지 추출 방법
+  1. `Reset`  
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css" />
+```
 
-사이트 클론에 필요한 이미지를 좀 더 쉽게 추출하기 위해서 Chrome 확장 프로그램인 [Image Downloader](https://chrome.google.com/webstore/detail/image-downloader/cnpniohnfphhjihaiiggeabnkjhpaldj?hl=ko)를 사용하세요.
+<br>
 
-1. 원하는 사이트 접속
-1. Image Downloader 확장 프로그램 실행
-1. 다운로드 원하는 이미지 선택
-1. 서브 폴더 이름(Save to subfolder) 명시
-1. 다운로드!
+### Scroll Js
+  1. Scroll (스크롤 시 Header show & hide 부분 적용)   
+```html
+<script src="https://code.jquery.com/jquery-3.6.4.js" integrity="sha256-a9jBBRygX1Bh5lt8GZjXDzyOB+bWve9EiO7tROUtj/E=" crossorigin="anonymous"></script>
+```
+
+<br>
+
+> HTML  
+> -header / mainco / aside / footer
+
+```html
+<header></header>
+
+<!-- mainco = maincontents -->
+<section class="mainco"></section> 
+
+<!-- aside = 최근 본 제품 및 ScrollTop 부분 -->
+<aside></aside>
+
+<footer></footer>
+```
+
+<br>
+
+> CSS   
+> -공통으로 쓰이는 태그의 속성과 값은 COMMON으로 적용
+
+```css
+/* COMMON  */
+* {
+  margin: 0;
+  padding: 0;
+}
+body {
+  font: 16px/1.5 'SDNeoL', 'notoR', 'Malgun Gothic', '맑은 고딕', '돋움', sans-serif;
+  letter-spacing: -.06em;
+  font-size: 16px;
+  color: #777;
+}
+a {
+  text-decoration: none;
+  outline: none;
+}
+img {
+  width: 100%;
+}
+button {
+  overflow: visible;
+  cursor: pointer;
+  background: none;
+  border: 0;
+  border-radius: 0;
+  color: inherit;
+  outline: none;
+}
+li {
+  list-style: none;
+}
+nav {
+  display: block;
+}
+input {
+  outline: none;
+}
+
+/* header & main-co & aside & footer 안에 이런 형식으로 최소 및 최대를 설정하여 진행했습니다.*/
+div {
+  min-width: 1024px;
+  max-width: 1280px;
+  margin: 0 auto;
+}
+
+/* display: flex를 사용했습니다. */
+div {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-shrink: 0;
+}
+```
+
+<br>
+
+> Javascript   
+> -Swiper : Event 부분 슬라이드   
+> -Jquery: 스크롤 시 상단으로  
+> -스크롤 시 Header show & hide
+
+```javascript
+// Swiper를 활용한 배너 슬라이드
+new Swiper('.slideWrap .swiper-container', {
+  autoplay: {
+    delay: 5000
+  },
+  loop: true,
+  slidesPerView: 1,
+  centeredSlides: true,
+  navigation: {
+    prevEl: '.swiper-button-prev',
+    nextEl: '.swiper-button-next',
+  },
+});
+// .swiper-button-prev 와 next를 클릭 시 좌우로 슬라이드가 가능하고, autoplay delay를 5초로 설정하여 5초 후 다음 슬라이드가 보여지도록 했습니다.
+
+
+// ASIDE Part - 버튼 클릭 시 페이지 상단으로 이동
+const $topBtn = document.querySelector(".btnDocTop");
+
+$topBtn.onclick = () => {
+  window.scrollTo({
+    top: 0,
+    behavior: "smooth"
+  });
+}
+// .btnDocTop를 클래스로 사용하는 버튼을 클릭 시 상단으로 자연스럽게 이동하도록 설정했습니다.
+
+
+// HEADER-FIXED - 스크롤 시 Show & Hide
+$(document).ready(function () {
+  var navHeight = $("header").height();
+  $(".fix--head").hide();
+  $(window).scroll(function () {
+    var rollIt = $(this).scrollTop() >= navHeight;
+    if (rollIt) {
+      $(".fix--head").show().css({
+        "position": "fixed",
+      });
+    } else {
+      $(".fix--head").hide();
+    }
+  });
+});
+// header의 영역이 끝난 후 .fix-head 클래스를 가진 요소가 fixed된 상태에서 보여지고 반대로 스크롤이 올라간 후에는 사라지는 것을 설정했습니다. 
+```
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 00000000..64fefa3d
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,2185 @@
+/* COMMON  */
+* {
+  margin: 0;
+  padding: 0;
+}
+body {
+  font: 16px/1.5 'SDNeoL', 'notoR', 'Malgun Gothic', '맑은 고딕', '돋움', sans-serif;
+  letter-spacing: -.06em;
+  font-size: 16px;
+  color: #777;
+}
+a {
+  text-decoration: none;
+  outline: none;
+}
+img {
+  width: 100%;
+}
+button {
+  overflow: visible;
+  cursor: pointer;
+  background: none;
+  border: 0;
+  border-radius: 0;
+  color: inherit;
+  outline: none;
+}
+li {
+  list-style: none;
+}
+input {
+  outline: none;
+}
+
+
+/* HEADER */
+header {
+  text-align: center;
+}
+header .banner {
+  background-color: #000;
+}
+header .banner .contWrap {
+  position: relative;
+  min-width: 1024px;
+  max-width: 1280px;
+  margin: 0 auto;
+}
+header .banner a {
+  color: #fff;
+}
+header .banner a .txt {
+  display: block;
+  padding: 13px 0;
+  font-size: 16px;
+  line-height: 1.2;
+}
+/* HEADER--myutil */
+header .myutil {
+  height: 46px;
+  background-color: #f3f1f2;
+}
+header .myutil .inner {
+  min-width: 1024px;
+  max-width: 1280px;
+  margin: 0 auto;
+}
+header .myutil ul.list__util {
+  position: relative;
+  display: flex;
+  float: right;
+  height: 46px;
+  align-items: center;
+}
+header .myutil ul.list__util > li {
+  position: relative;
+  display: inline-block;
+  margin-right: 21px;
+}
+header .myutil ul.list__util > li:last-child {
+  margin-right: 0;
+}
+header .myutil ul.list__util > li a {
+  font-size: 14px;
+  font-family: 'SDNeol', 'notoR';
+  color: #777;
+}
+header .myutil ul.list__util > li a:hover {
+  color: #12b560;
+}
+header .myutil ul.list__util > li .login {
+  margin-left: 20px;
+}
+header .myutil ul.list__util > li .login::after {
+  content: "";
+  position: absolute;
+  top: 8px;
+  left: 0;
+  width: 1px;
+  height: 11px;
+  border-left: 1px solid #969495;
+}
+header .myutil ul.list__util > li a #cart {
+  display: inline-block;
+  margin-left: 5px;
+  width: 18px;
+  height: 18px;
+  line-height: 19px;
+  border-radius: 50%;
+  background-color: #222;
+  color: #fff;
+  font-family: 'roboR';
+  font-size: 14px;
+  text-align: center;
+}
+/* HEADER--gnbmenu */
+header .gnbmenu {
+  position: relative;
+  padding-top: 23px;
+}
+header .gnbmenu .inner {
+  position: relative;
+  display: flex;
+  min-width: 1024px;
+  width: 1280px;
+  height: 73px;
+  margin: 0 auto;
+  align-items: center;
+}
+header .gnbmenu .logo {
+  position: absolute;
+  top: 21px;
+  left: 0;
+  z-index: 5;
+}
+header .gnbmenu .search {
+  position: relative;
+  width: 400px;
+  padding-left: 222px;
+}
+header .gnbmenu .search .keywordInput {
+  position: relative;
+  height: 34px;
+  padding-right: 50px;
+  border: 2px solid #d9d9d9;
+  border-radius: 21px;
+  overflow: hidden;
+}
+header .gnbmenu .search .keywordInput .inpitTxt {
+  width: 100%;
+  height: 34px;
+  border: 0;
+  font-size: 14px;
+  padding: 0 8px;
+  padding-left: 17px;
+  box-sizing: border-box;
+  color: #222;
+  vertical-align: middle;
+}
+header .gnbmenu .search .btnSearch {
+  position: absolute;
+  top: 3px;
+  height: 30px;
+  right: 11px;
+  width: 30px;
+  background: url("https://images.innisfree.co.kr/resources/web2/images/common/icon_search.png");
+  background-size: auto 30px;
+}
+header .gnbmenu .gnbnew {
+  margin-left: 50px;
+  flex: 1 0 auto;
+}
+header .gnbmenu .gnbnew .gnblist {
+  height: 63px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+header .gnbmenu .gnbnew .gnblist li {
+  position: relative;
+  margin-left: 24px;
+}
+header .gnbmenu .gnbnew .gnblist li .hit {
+  position: absolute;
+  top: 1px;
+  right: -9px;
+  width: 6px;
+  height: 6px;
+  background-color: #12b560;
+  border-radius: 50%;
+}
+header .gnbmenu .gnbnew .gnblist li:first-child {
+  margin-left: 0;
+}
+header .gnbmenu .gnbnew .gnblist li a {
+  display: inline-block;
+  color: #222;
+  font: 18px/1 'SDNeoM', 'notoM';
+  letter-spacing: -.5px;
+  vertical-align: middle;
+}
+header .category {
+  position: relative;
+  border-bottom: 1px solid #a6a6a6;
+}
+header .category > .inner {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  min-width: 1024px;
+  max-width: 1280px;
+  margin: 0 auto;
+}
+header .category ul.cateList {
+  position: relative;
+  z-index: 2;
+}
+header .category ul.cateList > li {
+  display: inline-flex;
+  align-items: center;
+  height: 55px;
+  margin-right: 15px;
+}
+/* catelist li에 마우스를 올릴 때 catedetail를 보이게 하는 것으로 대체*/
+header .category ul.cateList > li:hover .catedetail {
+  display: block;
+}
+/* catelist li에 마우스를 올릴 때 a::after를 보이게 하는 것으로 대체*/
+header .category ul.cateList > li:hover > a::after {
+  display: block;
+}
+header .category ul.cateList > li a:hover {
+  color: #12b560;
+}
+header .category ul.cateList > li a {
+  position: relative;
+  display: inline-block;
+  color: #222;
+}
+/* catelist li에 마우스를 올리기 전에 a::after를 보이지 않게 하는 것으로 대체*/
+header .category ul.cateList > li > a::after {
+  content: '';
+  width: 10px;
+  height: 9px;
+  position: absolute;
+  top: 31px;
+  left: 43%;
+  background: url("https://images.innisfree.co.kr/resources/web2/images/common/depth2_arr.png");
+  display: none;
+}
+header .category ul.cateList > li .catedetail {
+  position: absolute;
+  top: 56px;
+  left: 0;
+  width: 1280px;
+  height: 278px;
+  background-color: #fff;
+  border: 1px solid #b6b6b6;
+  border-top: 0;
+  padding: 31px 41px 20px 41px;
+  box-sizing: border-box;
+  display: none;
+}
+header .category ul.cateList > li .catedetail ul {
+  float: left;
+  overflow: hidden;
+}
+header .category ul.cateList > li .catedetail ul > li {
+  float: left;
+  width: 150px;
+}
+header .category ul.cateList > li .catedetail ul > li > a {
+  font-family: 'SDNeoM', 'notoM';
+  font-size: 14px;
+  color: #888;
+  text-align: left;
+  margin-bottom: 11px;
+  display: block;
+}
+header .category ul.cateList>li .catedetail ul>li>a:hover {
+  font-weight: bold;
+  color: #333;
+}
+
+
+/* SECTION-EVENT SLIDE */
+.mainco {
+  position: relative;
+  min-height: 500px;
+  padding-bottom: 110px;
+  border-top: 1px solid transparent;
+}
+.mainco--con {
+  box-sizing: border-box;
+}
+.mainco--con .eventbn {
+  position: relative;
+  margin: 0 auto;
+}
+.mainco--con .eventbn .slideWrap {
+  position: relative;
+  margin: 0 auto;
+  height: 640px;
+  overflow: hidden;
+}
+.mainco--con .eventbn .slideWrap .slide {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 1920px;
+  height: 640px;
+  overflow: hidden;
+}
+.mainco--con .swiper-wrapper {
+  position: relative;
+  display: flex;
+}
+.mainco--con .eventbn .slideWrap .slide .swiper-slide {
+  position: relative;
+  width: 1920px;
+}
+.mainco--con .swiper-wrapper .swiper-slide {
+  flex-shrink: 0;
+}
+.mainco--con .eventbn .imgWrap {
+  position: absolute;
+  top: 0;
+  left: 0%;
+  width: 1920px;
+  height: 640px;
+}
+.mainco--con .eventbn .imgWrap img {
+  width: 100%;
+}
+.mainco--con .eventbn .cntWrap {
+  width: 1280px;
+  height: 100%;
+  padding-top: 213px;
+  margin: 0 auto;
+}
+.mainco--con .eventbn .cntWrap .inner {
+  position: relative;
+  padding-top: 47px;
+}
+.mainco--con .eventbn .cntWrap .inner .tag-card {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  white-space: nowrap;
+}
+.mainco--con .eventbn .cntWrap .inner .tag-card > span {
+  display: inline-block;
+  text-align: center;
+  height: 24px;
+  line-height: 25px;
+  margin: 0 1px 0 0;
+  padding: 0 8px;
+  border-radius: 5px;
+  font-size: 16px;
+  letter-spacing: 0;
+  vertical-align: -webkit-baseline-middle;
+}
+.mainco--con .eventbn .cntWrap .inner .tag-card > span.cardSt_1 {
+  background-color: #ffff89;
+  color: #222;
+}
+.mainco--con .eventbn .cntWrap .inner .tag-card > span.cardSt_2 {
+  background-color: #222;
+  color: #fff;
+}
+.mainco--con .eventbn .cntWrap .inner .pi-name {
+  font-size: 40px;
+  color: #222;
+  line-height: 46px;
+}
+.mainco--con .eventbn .cntWrap .inner .pi-name > span {
+  display: block;
+}
+.mainco--con .eventbn .cntWrap .inner .pi-option {
+  margin-top: 5px;
+}
+.mainco--con .eventbn .cntWrap .inner .pi-option > span {
+  float: left;
+  margin-right: 8px;
+}
+.mainco--con .eventbn .cntWrap .inner .pi-option .price em {
+  font-size: 28px;
+  color: #222;
+}
+.mainco--con .eventbn .cntWrap .inner .pi-option .price .tCost {
+  font-family: sans-serif;
+  text-decoration: line-through;
+}
+.mainco--con .eventbn .cntWrap .inner .pi-option .price .tUnit {
+  font-family: 'roboM';
+  margin-left: 5px;
+}
+.mainco--con .eventbn .slideControl {
+  position: relative;
+  width: 1280px;
+  margin: 0 auto;
+}
+.mainco--con .eventbn .slideControl .inner {
+  position: relative;
+  display: inline-flex;
+  width: 40px;
+  height: 40px;
+  bottom: 26px;
+  border-radius: 50%;
+  box-sizing: border-box;
+  background-color: rgba(0, 0, 0, .3);
+  cursor: pointer;
+}
+.mainco--con .eventbn .slideControl .swiper-prev,
+.mainco--con .eventbn .slideControl .swiper-next {
+  position: absolute;
+  top: 315px;
+}
+.mainco--con .eventbn .slideControl .swiper-prev {
+  left: -140px;
+}
+.mainco--con .eventbn .slideControl .swiper-next {
+  right: -140px;
+}
+.mainco--con .eventbn .slideControl .swiper-button-prev::before,
+.mainco--con .eventbn .slideControl .swiper-button-next::before {
+  content: "";
+  position: absolute;
+  top: 14px;
+  width: 10px;
+  height: 10px;
+  border-style: solid;
+  border-color: #fff;
+  font-size: 0;
+  color: transparent;
+  outline: none;
+  z-index: 9;
+  transform: rotate(45deg);
+}
+.mainco--con .eventbn .slideControl .swiper-button-prev::before {
+  left: 16px;
+  border-width: 0px 0px 2px 2px;
+}
+.mainco--con .eventbn .slideControl .swiper-button-next::before {
+  right: 16px;
+  border-width: 2px 2px 0px 0px;
+}
+
+
+/* SECTION-실시간 인기 #키워드 */
+.live-keword {
+  border-bottom: 1px solid #ddd;
+}
+.live-keword .inner {
+  position: relative;
+  display: flex;
+  width: 1280px;
+  height: 108px;
+  margin: 0 auto;
+}
+.live-keword .inner .keyword--hashSlide {
+  width: 100%;
+  align-self: center;
+  padding: 0 0 0 40px;
+}
+.live-keword .inner .keyword--title {
+  width: 228px;
+  padding-top: 32px;
+  border-right: 1px solid #ddd;
+}
+.live-keword .inner .keyword--title .title__name {
+  font-size: 20px;
+  font-family: 'SDNeoM';
+  color: #222;
+  line-height: 26px;
+  padding-top: 2px;
+}
+.live-keword .inner .keyword--title .title__date {
+  font-size: 13px;
+  color: #999;
+}
+.swiper-container-horizontal {
+  overflow: hidden;
+}
+.live-keword .inner .keyword--hashSlide .shadow {
+  display: none !important;
+  filter: blur(3px);
+  position: absolute;
+  z-index: 1;
+  top: 35px;
+  right: 48px;
+  pointer-events: none;
+  border: 15ps solid #f5f5f5;
+  opacity: .9;
+}
+.swiper-wrapper {
+  position: relative;
+  display: flex;
+}
+.swiper-wrapper .swiper-slide {
+  flex-shrink: 0;
+}
+.live-keword .inner .keyword--hashSlide .hashTag {
+  border: 1px solid #ccc;
+  display: inline-flex;
+  align-items: center;
+  height: 32px;
+  margin-right: 10px;
+  background-color: #fff;
+  border-radius: 16px;
+  text-align: center;
+}
+.live-keword .inner .keyword--hashSlide li:last-child .hashTag {
+  margin-right: 0;
+}
+.live-keword .inner .keyword--hashSlide .hashTag:hover {
+  border: 1px solid #12b560;
+  background-color: #f7fffd;
+  color: #12b560;
+}
+.live-keword .inner .keyword--hashSlide .hashTag:hover a {
+  color: #12b560;
+}
+.live-keword .inner .keyword--hashSlide .hashTag a {
+  display: block;
+  padding: 0px 16px 0px 16px;
+  color: #222;
+}
+
+
+/* SECTION-지금이 쇼핑찬스 */
+.mainco--con .shopch {
+  position: relative;
+  width: 1280px;
+  margin: 90px auto 0 auto;
+}
+.shopch * {
+  box-sizing: border-box;
+}
+.shopch .title {
+  display: flex;
+  justify-content: space-between;
+}
+.shopch .title h4 {
+  font-size: 32px;
+  font-family: 'SDNeoM';
+  color: #222;
+}
+.shopch .title .link {
+  position: absolute;
+  top: 12px;
+  right: 0;
+  padding: 0 30px 2px 0;
+  background: url("https://images.innisfree.co.kr/resources/web2/images/main/icon_more.png") no-repeat 100% 100%;
+  color: #333;
+}
+.shopch ul>div {
+  display: flex;
+}
+.shopch .shopch__list {
+  width: 314px;
+  margin-left: 8px;
+  transition: all .3s;
+  border-radius: 5px;
+}
+.shopch .shopch__list:nth-child(1) {
+  margin-left: 0px;
+}
+.shopch .pdtList {
+  position: relative;
+  margin-top: 32px;
+  transition: all .3s;
+  background-color: #fff;
+}
+.shopch .pdtList .pdtOver .pdtImg:hover .basic {
+  opacity: 0;
+  z-index: -4;
+}
+.shopch .pdtList .pdtOver .pdtImg:hover .over {
+  opacity: 1;
+  z-index: 4;
+  transform: rotateY(0);
+}
+.shopch .pdtList .pdtOver {
+  position: relative;
+  display: block;
+  transition: all .3s;
+}
+.shopch .pdtList .pdtImg {
+  top: 0;
+  left: 0;
+  display: block;
+  overflow: hidden;
+  transition: all .3s;
+  border-radius: 5px 5px 0 0;
+  border-bottom: none;
+}
+.shopch .pdtList .pdtImg::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 5px;
+  overflow: hidden;
+  background-color: #fafafa;
+  mix-blend-mode: multiply;
+  z-index: 3;
+}
+.shopch .pdtList .pdtImg > img {
+  width: 100%;
+  border-radius: 5px 5px 0 0;
+}
+.shopch .pdtList .pdtOver .pdtImg .basic {
+  opacity: 1;
+  transition: all .3s;
+}
+.shopch .pdtList .pdtOver .pdtImg .over {
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  z-index: -4;
+  transition: all .3s;
+  transform: rotateY(180deg);
+}
+.shopch .pdtList .pdtCont {
+  position: relative;
+  display: block;
+  height: 206px;
+  padding: 20px 24px 0 24px;
+  font-family: 'SDNeoL''notoL';
+  box-sizing: border-box;
+}
+.shopch .pdtList .pdtCont .pdname {
+  display: block;
+  margin: 0 0 3px;
+  overflow: hidden;
+  white-space: normal;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  color: #333;
+  word-break: break-all;
+}
+.shopch .pdtList .pdtCont .price {
+  position: relative;
+  margin-top: 0;
+  font-family: 'roboR';
+}
+.shopch .pdtList .pdtCont .price .unit {
+  font-size: 26px;
+  font-family: 'roboM';
+  vertical-align: 0px;
+  line-height: 1.6;
+  color: #222;
+}
+.shopch .pdtList .pdtCont .price .cost {
+  font-size: 19px;
+  font-family: 'notoL';
+  margin: 0 3px 0 4px;
+  text-decoration: line-through;
+  font-weight: normal;
+  color: #999;
+  vertical-align: 2px;
+}
+.shopch .pdtList .pdtCont .price .stock {
+  font-size: 26px;
+  color: #d62136;
+}
+.shopch .pdtList .pdtCont .starWrap em.starM {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  vertical-align: text-top;
+  background: url("https://images.innisfree.co.kr/resources/web2/images/home/icon_starM.png") no-repeat left top;
+  background-size: 100%;
+  font-size: 0;
+}
+.shopch .pdtList .pdtCont .starWrap .starNum {
+  display: inline-block;
+  font-size: 14px;
+  color: #777;
+  white-space: nowrap;
+  margin-left: -1px;
+}
+.shopch .shopch__contents .shopch-control {
+  position: absolute;
+  top: 50%;
+  width: 100%;
+  color: transparent;
+  z-index: 10;
+}
+.shopch .shopch-control > div {
+  position: absolute;
+  width: 48px;
+  height: 48px;
+  cursor: pointer;
+  opacity: 0.67;
+}
+.shopch .shopch-control .shopch-control__prev {
+  background: url("https://images.innisfree.co.kr/resources/web2/images/home/sprd_left.png") no-repeat;
+  background-size: cover;
+  left: -80px;
+}
+.shopch .shopch-control .shopch-control__next {
+  background: url("https://images.innisfree.co.kr/resources/web2/images/home/sprd_right.png") no-repeat;
+  background-size: cover;
+  right: -80px;
+}
+.shopch .shopch-control .shopch-control__prev:hover,
+.shopch .shopch-control .shopch-control__next:hover {
+  opacity: 1;
+}
+
+
+/* SECTION-이 상품 관심있지 않으세요? */
+.shopforu {
+  position: relative;
+  min-width: 1280px;
+  max-width: 1920px;
+  height: 790px;
+  padding: 75px 0 0 0;
+  margin: 76px auto 0 auto;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+.shopforu::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #fafafa;
+  z-index: -1;
+}
+.shopforu .title {
+  position: relative;
+  width: 1280px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+}
+.shopforu .title h4 {
+  font-size: 32px;
+  font-family: 'SDNeoM';
+  color: #222;
+}
+.shopforu .title .link {
+  position: absolute;
+  top: 12px;
+  right: 0;
+  padding: 0 30px 2px 0;
+  background: url("https://images.innisfree.co.kr/resources/web2/images/main/icon_more.png") no-repeat 100% 100%;
+  color: #333;
+}
+.shopforu .shopforu-contents {
+  width: 1920px;
+  position: absolute;
+  top: 154px;
+}
+.shopforu .shopforu-contents::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  z-index: 2;
+  width: calc(50% - 642px);
+  background-color: rgba(250, 250, 250, .5);
+}
+.shopforu .shopforu-contents::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 2;
+  width: calc(50% - 642px);
+  background-color: rgba(250, 250, 250, .5);
+}
+.shopforu .shopforu-list {
+  position: relative;
+  width: 1280px;
+  margin: 0 auto;
+}
+.shopforu .shopforu-list ul {
+  position: relative;
+  display: flex;
+  margin-left: -34%;
+}
+.shopforu .shopforu-list ul > li {
+  width: 416px;
+  margin-right: 16px;
+}
+.shopforu .pdtList {
+  position: relative;
+  margin-top: 0;
+}
+.shopforu .pdtList .pdtOver {
+  display: block;
+  width: 416px;
+}
+.shopforu .pdtList .pdtOver .pdtImg {
+  position: relative;
+  z-index: 1;
+  display: block;
+  border-radius: 5px;
+  overflow: hidden;
+  height: 100%;
+}
+.shopforu .pdtList .pdtOver .pdtImg > img {
+  position: relative;
+  width: 100%;
+  z-index: 2;
+  transition: all .3s;
+  transform: rotateY(0);
+  backface-visibility: hidden;
+  border-radius: 5px 5px 0 0;
+}
+.shopforu .pdtList .pdtOver .pdtImg:hover .basic {
+  opacity: 0;
+  z-index: -4;
+}
+.shopforu .pdtList .pdtOver .pdtImg:hover .over {
+  opacity: 1;
+  z-index: 4;
+  transform: rotateY(0);
+}
+.shopforu .pdtList .pdtOver .pdtImg .basic {
+  opacity: 1;
+  transition: all .3s;
+  z-index: 4;
+}
+.shopforu .pdtList .pdtOver .pdtImg .over {
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  z-index: -4;
+  transition: all .3s;
+  transform: rotateY(180deg);
+}
+.shopforu .pdtList .pdtCont {
+  position: relative;
+  display: block;
+  height: 142px;
+  padding: 20px 24px 0 24px;
+  font-family: 'SDNeoL', 'notoL';
+}
+.shopforu .pdtList .pdtCont .pdname {
+  margin: 0 0 3px;
+  overflow: hidden;
+  white-space: normal;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  color: #333;
+  word-break: break-all;
+}
+.shopforu .pdtList .pdtCont .price {
+  position: relative;
+  margin-top: 0;
+  font-family: 'roboR';
+}
+.shopforu .pdtList .pdtCont .price .unit {
+  font-size: 26px;
+  font-family: 'roboM';
+  vertical-align: 0px;
+  line-height: 1.6;
+  color: #222;
+}
+.shopforu .pdtList .pdtCont .price .cost {
+  font-size: 19px;
+  font-family: 'notoL';
+  margin: 0 3px 0 4px;
+  text-decoration: line-through;
+  font-weight: normal;
+  color: #999;
+  vertical-align: 2px;
+}
+.shopforu .pdtList .pdtCont .price .stock {
+  font-size: 26px;
+  color: #d62136;
+}
+.shopforu .shopforu-control {
+  position: absolute;
+  top: 225px;
+  width: 100%;
+  z-index: 10;
+}
+.shopforu .shopforu-control .shopforu-button__prev,
+.shopforu .shopforu-control .shopforu-button__next {
+  position: absolute;
+  width: 48px;
+  height: 48px;
+  cursor: pointer;
+  opacity: .67;
+}
+.shopforu .shopforu-control .shopforu-button__prev:hover,
+.shopforu .shopforu-control .shopforu-button__next:hover {
+  opacity: 1;
+}
+.shopforu .shopforu-control .shopforu-button__prev {
+  background: url("https://images.innisfree.co.kr/resources/web2/images/home/sprd_left.png") no-repeat;
+  background-size: cover;
+  left: -80px;
+}
+.shopforu .shopforu-control .shopforu-button__next {
+  background: url("https://images.innisfree.co.kr/resources/web2/images/home/sprd_right.png") no-repeat;
+  background-size: cover;
+  right: -80px;
+}
+
+
+/* SECTION-고객님에게 딱이에요! */
+.shopClient {
+  position: relative;
+  min-width: 1280px;
+  max-width: 1920px;
+  margin: 0 auto;
+}
+.shopClient .topBx {
+  height: 336px;
+  margin: 0 auto;
+  padding-top: 64px;
+  background-image: linear-gradient(111deg, #1a90fb -7%, #12b260 50%, #ffff82 107%);
+  box-sizing: border-box;
+}
+.shopClient .topBx .title {
+  position: relative;
+  text-align: center;
+  width: 1280px;
+  margin: 0 auto;
+}
+.shopClient .topBx .title h4 {
+  display: inline-block;
+  width: 80px;
+  height: 38px;
+  margin: 0 auto;
+  background: url("https://images.innisfree.co.kr/resources/web2/images/home/fou_tit.png") no-repeat left top;
+  background-size: 100%;
+  color: transparent;
+  line-height: 55px;
+}
+.shopClient .topBx .title .link {
+  position: relative;
+  display: inline-block;
+  color: #fff;
+  font-size: 38px;
+  margin: 0 0 0 11px;
+  font-family: 'SDNeoM';
+}
+.shopClient .topBx .title .link::after {
+  content: '';
+  position: absolute;
+  right: -40px;
+  top: 7px;
+  width: 38px;
+  height: 38px;
+  background: url("https://images.innisfree.co.kr/resources/web2/images/home/icon_m_w_right.png") no-repeat left top;
+  background-size: 100%;
+}
+.shopClient .fou-option {
+  border: 1px solid #f4f4f4;
+  border-radius: 5px;
+  width: 1280px;
+  height: 88px;
+  padding: 25px 0 0;
+  font-size: 24px;
+  color: #999;
+  background-color: #fff;
+  margin: 21px auto 0 auto;
+  text-align: center;
+  box-shadow: 2.5px 4.3px 5px 0 rgba(0, 0, 0, .07);
+  box-sizing: border-box;
+}
+.shopClient .fou-option button.option {
+  width: auto;
+  height: auto;
+  padding: 0 30px 0 0;
+  border: 0;
+  border-bottom: 2px solid #222;
+  color: #222;
+  font-size: 24px;
+  font-family: 'SDNeoM';
+  line-height: 1.2;
+  border-radius: unset;
+  background: url("https://images.innisfree.co.kr/resources/web2/images/home/icon_s_drop_open.png") no-repeat right center;
+  background-size: 24px;
+}
+.shopClient .fou-option p {
+  display: inline-block;
+  vertical-align: middle;
+}
+.shopClient .fou-option p.p01 {
+  margin-right: 13px;
+}
+.shopClient .pdtList {
+  position: relative;
+  width: 1280px;
+  height: 1096px;
+  margin: -44px auto 0 auto;
+}
+.shopClient .pdtList ul {
+  margin-left: -16px;
+  overflow: hidden;
+}
+.shopClient .pdtList ul > li {
+  position: relative;
+  float: left;
+  width: 416px;
+  margin: 0px 0 24px;
+  margin-left: 16px;
+}
+.shopClient .pdtList .pdtOver {
+  display: block;
+}
+.shopClient .pdtList .pdtImg {
+  position: relative;
+  display: block;
+  height: 416px;
+  border-radius: 5px;
+  overflow: hidden;
+  z-index: 1;
+}
+.shopClient .pdtList .pdtImg::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 5px;
+  overflow: hidden;
+  background-color: #fafafa;
+  mix-blend-mode: multiply;
+  z-index: 3;
+}
+.shopClient .pdtList .pdtImg .stikerWrap {
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  z-index: 5;
+}
+.shopClient .pdtList .pdtImg .stikerWrap .stikderType2 {
+  font-size: 16px;
+  display: block;
+  width: auto;
+  min-width: 58px;
+  padding: 0 6px;
+  height: 29px;
+  margin: 0 0 4px;
+  line-height: 29px;
+  border-radius: 5px;
+  border: 1px solid #222;
+  background-color: #fff;
+  color: #222;
+  font-family: 'SDNeoM';
+  text-align: center;
+  letter-spacing: -.64px;
+  box-sizing: border-box;
+}
+.shopClient .pdtList .pdtOver {
+  display: block;
+  width: 414px;
+  height: 414px;
+}
+.shopClient .pdtList .pdtOver .pdtImg {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  z-index: 1;
+}
+.shopClient .pdtList .pdtOver .pdtImg::before .basic {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 5px;
+  background-color: #fff;
+}
+.shopClient .pdtList .pdtOver .pdtImg:hover .basic {
+  opacity: 0;
+  z-index: -4;
+}
+.shopClient .pdtList .pdtOver .pdtImg:hover .over {
+  opacity: 1;
+  z-index: 4;
+  transform: rotateY(0);
+}
+.shopClient .pdtList .pdtOver .pdtImg .basic {
+  opacity: 1;
+  transition: all .3s;
+  z-index: 4;
+}
+.shopClient .pdtList .pdtOver .pdtImg .over {
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  z-index: -4;
+  transition: all .3s;
+  transform: rotateY(180deg);
+}
+.shopClient .pdtCont {
+  position: relative;
+  display: block;
+  height: 108px;
+  padding: 20px 24px 0 24px;
+  font-family: 'SDNeoL', 'notoL';
+}
+.shopClient .pdtCont .name {
+  display: block;
+  margin: 0 0 8px;
+  font-size: 16px;
+  color: #333;
+  line-height: 1.2;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.shopClient .pdtCont .tag2 {
+  height: 20px;
+  line-height: 18px;
+  display: inline-block;
+  padding: 0px 9px 0px 8px;
+  margin: 0 1px 4px 0;
+  font-size: 12px;
+  color: #222;
+  background-color: #fff;
+  white-space: nowrap;
+  box-sizing: border-box;
+  border: 1px solid #ccc;
+  border-radius: 10px;
+}
+.shopClient .more {
+  margin-top: 15px;
+  text-align: center;
+}
+.shopClient .more .btnRefesh {
+  position: relative;
+  width: 298px;
+  height: 48px;
+  font-size: 16px;
+  line-height: 48px;
+  color: #222;
+  border: 1px solid #ccc;
+  text-align: center;
+  background-color: #fff;
+  border-radius: 24px;
+}
+.shopClient .more .btnRefesh::before {
+  content: '';
+  display: inline-block;
+  margin: 0 8px 0 0;
+  width: 30px;
+  height: 30px;
+  background: url("https://images.innisfree.co.kr/resources/web2/images/home/icon_m_refresh.png") no-repeat;
+  background-size: 100%;
+  vertical-align: -10px;
+}
+.shopClient .more .btnRefesh .ttal {
+  font-family: 'roboM';
+  font-size: 14px;
+  margin-left: 5px;
+  color: #222;
+}
+.shopClient .more .btnRefesh .ttal span {
+  color: #999;
+}
+
+
+/* SECTION-지금 제일 잘나가요 */
+.shopRank {
+  position: relative;
+  min-width: 1280px;
+  height: 730px;
+  padding: 70px 0 0 0;
+  margin: 40px auto 0 auto;
+}
+.shopRank::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #fafafa;
+  z-index: -1;
+}
+.shopRank .title {
+  width: 1280px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+}
+.shopRank .title h4 {
+  font-size: 32px;
+  font-family: 'SDNeoM';
+  color: #222;
+}
+.shopRank .tabWrap {
+  position: relative;
+  width: 1280px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.shopRank .tabWrap .rankingTab {
+  margin: 12px 0 40px 0;
+  border-radius: 25px;
+  background-color: #f4f4f4;
+  overflow: hidden;
+}
+.shopRank .tabWrap .rankingTab > li {
+  position: relative;
+  float: left;
+  width: 154px;
+}
+.shopRank .tabWrap .rankingTab > .active a {
+  color: #12b560;
+  font-family: 'SDNeoM';
+  background-color: #fff;
+  border: 2px solid #12b560;
+  border-radius: 24px;
+  line-height: 40px;
+}
+.shopRank .tabWrap .rankingTab > li a {
+  display: block;
+  width: 100%;
+  height: 100%;
+  line-height: 48px;
+  color: #999;
+  font-size: 16px;
+  text-align: center;
+}
+.shopRank .tabWrap .link {
+  position: absolute;
+  top: 25px;
+  right: 0;
+  padding: 0 30px 2px 0;
+  background: url("https://images.innisfree.co.kr/resources/web2/images/main/icon_more.png") no-repeat 100% 100%;
+  color: #333;
+}
+.shopRank .shopRankList {
+  min-width: 1280px;
+  max-width: 1920px;
+  overflow: hidden;
+  margin: 0 auto 0 auto;
+}
+.shopRank .shopRankList::before {
+  content: '';
+  position: absolute;
+  top: 219px;
+  left: 0;
+  bottom: 0;
+  height: 454px;
+  z-index: 6;
+  width: calc(50% - 640px);
+  background-color: rgba(250, 250, 250, .5);
+}
+.shopRank .shopRankList::after {
+  content: '';
+  position: absolute;
+  top: 219px;
+  right: 0;
+  bottom: 0;
+  height: 454px;
+  z-index: 6;
+  width: calc(50% - 640px);
+  background-color: rgba(250, 250, 250, .5);
+}
+.shopRank .shopRank-contents {
+  position: relative;
+  width: 1280px;
+  margin: 0 auto;
+  overflow: unset;
+}
+.shopRank .shopRank-contents > ul {
+  position: relative;
+  display: flex;
+  margin-left: -320px;
+}
+.shopRank .shopRank-contents > ul > li {
+  width: 314px;
+  margin-right: 8px;
+}
+.shopRank .pdtList {
+  margin-top: 0;
+  position: relative;
+}
+.shopRank .pdtList .pdtOver {
+  height: 314px;
+  display: block;
+}
+.shopRank .pdtList .pdtOver .pdtImg {
+  position: relative;
+  height: 100%;
+  z-index: 1;
+  display: block;
+  border-radius: 5px;
+  overflow: hidden;
+}
+.shopRank .pdtList .pdtOver .pdtImg::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 5px;
+  overflow: hidden;
+  mix-blend-mode: multiply;
+  z-index: 3;
+}
+.shopRank .pdtList .pdtOver .pdtImg .rankNum {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 5;
+}
+.shopRank .pdtList .pdtOver .pdtImg .rankNum .rankNumType_1,
+.shopRank .pdtList .pdtOver .pdtImg .rankNum .rankNumType_2 {
+  display: block;
+  font-size: 20px;
+  width: 44px;
+  height: 44px;
+  margin: 0 0 4px;
+  line-height: 44px;
+  border-radius: 5px 1px 5px 1px;
+  color: #fff;
+  font-family: 'roboM', 'SDNeoL';
+  text-align: center;
+  box-sizing: border-box;
+  letter-spacing: 0;
+  z-index: 5;
+}
+.shopRank .pdtList .pdtOver .pdtImg .rankNum .rankNumType_1 {
+  background-color: #12b560;
+}
+.shopRank .pdtList .pdtOver .pdtImg .rankNum .rankNumType_2 {
+  background-color: #ccc;
+}
+.shopRank .pdtList .pdtOver {
+  display: block;
+  width: 312px;
+  height: 312px;
+}
+.shopRank .pdtList .pdtOver .pdtImg {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  z-index: 1;
+}
+.shopRank .pdtList .pdtOver .pdtImg::before .basic {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 5px;
+  background-color: #fff;
+}
+.shopRank .pdtList .pdtOver .pdtImg:hover .basic {
+  opacity: 0;
+  z-index: -4;
+}
+.shopRank .pdtList .pdtOver .pdtImg:hover .over {
+  opacity: 1;
+  z-index: 4;
+  transform: rotateY(0);
+}
+.shopRank .pdtList .pdtOver .pdtImg .basic {
+  opacity: 1;
+  transition: all .3s;
+  z-index: 4;
+}
+.shopRank .pdtList .pdtOver .pdtImg .over {
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  z-index: -4;
+  transition: all .3s;
+  transform: rotateY(180deg);
+}
+.shopRank .pdtList .pdtCont {
+  position: relative;
+  display: block;
+  height: 142px;
+  padding: 20px 24px 0 24px;
+  font-family: 'SDNeoL', 'notoL';
+}
+.shopRank .pdtList .pdtCont .pdname {
+  margin: 0 0 3px;
+  overflow: hidden;
+  white-space: normal;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  color: #333;
+  word-break: break-all;
+}
+.shopRank .pdtList .pdtCont .price {
+  position: relative;
+  margin-top: 0;
+  font-family: 'roboR';
+}
+.shopRank .pdtList .pdtCont .price .unit {
+  font-size: 26px;
+  font-family: 'roboM';
+  vertical-align: 0px;
+  line-height: 1.6;
+  color: #222;
+}
+.shopRank .pdtList .pdtCont .price .cost {
+  font-size: 19px;
+  font-family: 'notoL';
+  margin: 0 3px 0 4px;
+  text-decoration: line-through;
+  font-weight: normal;
+  color: #999;
+  vertical-align: 2px;
+}
+.shopRank .pdtList .pdtCont .price .stock {
+  font-size: 26px;
+  color: #d62136;
+}
+.shopRank .shopRank-control {
+  position: absolute;
+  top: 50%;
+  width: 100%;
+  z-index: 10;
+}
+.shopRank .shopRank-control .Rank-button-prev,
+.shopRank .shopRank-control .Rank-button-next {
+  position: absolute;
+  width: 48px;
+  height: 48px;
+  cursor: pointer;
+  opacity: .67;
+}
+.shopRank .shopRank-control .Rank-button-prev:hover,
+.shopRank .shopRank-control .Rank-button-next:hover {
+  opacity: 1;
+}
+.shopRank .shopRank-control .Rank-button-prev {
+  background: url("https://images.innisfree.co.kr/resources/web2/images/home/sprd_left.png") no-repeat;
+  background-size: cover;
+  left: -80px;
+}
+.shopRank .shopRank-control .Rank-button-next {
+  background: url("https://images.innisfree.co.kr/resources/web2/images/home/sprd_right.png") no-repeat;
+  background-size: cover;
+  right: -80px;
+}
+
+
+
+/* SECTION-주목해야 할 신제품 추천 */
+.newPd {
+  position: relative;
+  min-width: 1280px;
+  max-width: 1920px;
+  margin: 70px auto 0 auto;
+}
+.newPd .title {
+  position: relative;
+  width: 1280px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+}
+.newPd .title h4 {
+  font-size: 32px;
+  font-family: 'SDNeoM';
+  color: #222;
+}
+.newPd .title .link {
+  position: absolute;
+  top: 12px;
+  right: 0;
+  padding: 0 30px 2px 0;
+  background: url("https://images.innisfree.co.kr/resources/web2/images/main/icon_more.png") no-repeat 100% 100%;
+  color: #333;
+}
+.newPd .newPd--contents {
+  position: relative;
+  width: 1280px;
+  margin: 30px auto 0 auto;
+}
+.newPd .newPd--contents .newPd__detail {
+  flex-wrap: wrap;
+  display: flex;
+  margin: 0 auto;
+  width: 1280px;
+  justify-content: space-between;
+}
+.newPd .newPd--contents .newPd__detail .newPd__list {
+  width: 632px !important;
+  margin-left: 16px;
+}
+.newPd .newPd--contents .newPd__detail .newPd__list:nth-child(1),
+.newPd .newPd--contents .newPd__detail .newPd__list:nth-child(3) {
+  margin-left: 0px;
+}
+.newPd .newPd--contents .pdtList {
+  position: relative;
+  margin-top: 0;
+}
+.newPd .newPd--contents .pdtList .pdtImg {
+  position: relative;
+  z-index: 1;
+  display: block;
+  border-radius: 5px;
+  height: 382px;
+  overflow: hidden;
+}
+.newPd .newPd--contents .pdtList .pdtImg::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 5px;
+  overflow: hidden;
+  background-color: #fafafa;
+  mix-blend-mode: multiply;
+  z-index: 3;
+}
+.newPd .newPd--contents .pdtList .pdtImg .tag-card {
+  position: absolute;
+  bottom: 16px;
+  right: 14px;
+  z-index: 10;
+  white-space: nowrap;
+}
+.newPd .newPd--contents .pdtList .pdtImg .tag-card > span {
+  display: inline-block;
+  align-items: center;
+  max-width: 50px;
+  height: 24px;
+  line-height: 25px;
+  margin: 0;
+  padding: 0 8px;
+  border-radius: 5px;
+  font-size: 16px;
+  letter-spacing: 0px;
+  text-align: center;
+  vertical-align: -webkit-baseline-middle;
+}
+.newPd .newPd--contents .pdtList .pdtImg .tag-card > span.cardSt_1 {
+  background-color: #12b560;
+  color: #fff;
+}
+.newPd .newPd--contents .pdtList .pdtCont {
+  position: relative;
+  display: block;
+  height: 154px;
+  padding: 20px 24px 0 24px;
+  font-family: 'SDNeoL', 'notoL';
+}
+.newPd .newPd--contents .pdtList .pdtCont .newPdname {
+  display: block;
+  color: #333;
+  font-size: 20px;
+  font-family: 'SDNeoM';
+  margin: 0 0 8px;
+  line-height: 1.2;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.newPd .newPd--contents .pdtList .pdtCont .newPdname2 {
+  font-size: 16px;
+  color: #999;
+  margin: 0 0 2px;
+  margin-bottom: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  word-break: break-all;
+}
+
+
+/* SECTION-고객님들의 솔직한 리뷰 */
+.clientReview {
+  position: relative;
+  min-width: 1280px;
+  height: 790px;
+  padding: 70px 0 0 0;
+  margin: 70px auto 0 auto;
+}
+.clientReview::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #fafafa;
+  z-index: -1;
+}
+.clientReview .title {
+  width: 1280px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+}
+.clientReview .title h4 {
+  font-size: 32px;
+  font-family: 'SDNeoM';
+  color: #222;
+}
+.clientReview .Reviewcont {
+  position: relative;
+  width: 1280px;
+  margin: 30px auto 0 auto;
+}
+.clientReview .Reviewcont__cont {
+  position: relative;
+  margin: 0 auto;
+}
+.clientReview .Condetail {
+  display: flex;
+}
+.clientReview .Condetail li {
+  width: 416px !important;
+  margin-right: 15px;
+  flex-shrink: 0;
+}
+.clientReview .pdtList {
+  position: relative;
+  height: 588px;
+  border: 0;
+  border-radius: 5px;
+  margin-top: 0;
+}
+.clientReview .pdtList .pdtImg {
+  position: relative;
+  z-index: 1;
+  display: block;
+  border-radius: 5px 5px 0 0;
+  height: 416px;
+  box-shadow: 2px 4px 5px 0 rgb(0 0 0 / 7%);
+  overflow: hidden;
+}
+.clientReview .pdtList .pdtImg::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 5px;
+  overflow: hidden;
+  background-color: #fafafa;
+  mix-blend-mode: multiply;
+  z-index: 3;
+}
+.clientReview .pdtList .pdtImg > img {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+  transition: all .3s;
+  transform: rotateY(0);
+  border-radius: 5px 5px 0 0;
+}
+.clientReview .pdtList .pdtCont {
+  position: absolute;
+  bottom: 5px;
+  height: 168px;
+  width: 416px;
+  border: 1px solid #f4f4f4;
+  border-top: 0;
+  border-left: 2px #f4f4f4;
+  border-radius: 0 0 5px 5px;
+  background-color: #fff;
+  box-sizing: border-box;
+  padding: 23px 30px 0 30px;
+  box-shadow: 2px 4px 5px 0 rgb(0 0 0 / 7%);
+  transition: all .3s;
+  z-index: 3;
+  overflow: hidden;
+}
+.clientReview .pdtList .pdtCont:hover {
+  height: 232px;
+}
+.clientReview .pdtList .pdtCont:hover .name2 {
+  -webkit-line-clamp: 5;
+  margin-bottom: 14px;
+}
+.clientReview .pdtList .pdtCont .name {
+  display: block;
+  margin: 0 0 3px;
+  overflow: hidden;
+  white-space: normal;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  color: #333;
+  word-break: break-all;
+}
+.clientReview .pdtList .pdtCont .name2 {
+  color: #777;
+  overflow: hidden;
+  white-space: normal;
+  margin: 0 0 14px;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  word-break: break-all;
+}
+.clientReview .pdtList .pdtCont .starWrap em.starM {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  vertical-align: text-top;
+  background: url("https://images.innisfree.co.kr/resources/web2/images/home/icon_starM.png") no-repeat left top;
+  background-size: 100%;
+  font-size: 0;
+}
+.clientReview .pdtList .pdtCont .starWrap .starNum {
+  display: inline-block;
+  font-size: 14px;
+  color: #777;
+  white-space: nowrap;
+  margin-left: -1px;
+}
+.clientReview .clientReview-control {
+  position: absolute;
+  top: 267px;
+  width: 100%;
+  z-index: 10;
+}
+.clientReview .clientReview-control .Review-button-prev,
+.clientReview .clientReview-control .Review-button-next {
+  position: absolute;
+  width: 48px;
+  height: 48px;
+  cursor: pointer;
+  opacity: .67;
+}
+.clientReview .clientReview-control .Review-button-prev:hover,
+.clientReview .clientReview-control .Review-button-next:hover {
+  opacity: 1;
+}
+.clientReview .clientReview-control .Review-button-prev {
+  background: url("https://images.innisfree.co.kr/resources/web2/images/home/sprd_left.png") no-repeat;
+  background-size: cover;
+  left: -80px;
+}
+.clientReview .clientReview-control .Review-button-next {
+  background: url("https://images.innisfree.co.kr/resources/web2/images/home/sprd_right.png") no-repeat;
+  background-size: cover;
+  right: -80px;
+}
+
+
+/* SECTION-이니스프리 멤버십 혜택 안내 */
+.MemberShip {
+  position: relative;
+}
+.MemberShip .MemberShip--subTitle {
+  position: relative;
+  min-width: 1024px;
+  max-width: 1280px;
+  margin: 96px auto 9px;
+  font-size: 32px;
+  color: #222;
+  font: 32px/1.2 'SDNeoM', 'notoM';
+}
+.MemberShip .MemberShip--contWrap {
+  position: relative;
+  min-width: 1024px;
+  max-width: 1280px;
+  margin: 0 auto;
+}
+.MemberShip .MemberShip--contWrap .pdtMore {
+  position: absolute;
+  top: -42px;
+  right: 0;
+  padding: 0 30px 1px 0;
+  background: url("https://images.innisfree.co.kr/resources/web2/images/main/icon_more.png") no-repeat 100% 100%;
+  color: #222;
+}
+.MemberShip .MemberShip--contWrap .subTxt {
+  font-size: 20px;
+  color: #222;
+}
+.MemberShip .MemberShip--contWrap .list {
+  display: flex;
+  justify-content: space-around;
+  margin: 42px 0 0;
+}
+.MemberShip .MemberShip--contWrap .list li {
+  text-align: center;
+  font-size: 18px;
+}
+.MemberShip .MemberShip--contWrap .list li .icon {
+  position: relative;
+  display: inline-block;
+  margin: 0 auto;
+}
+.MemberShip .MemberShip--contWrap .list li .icon::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: #f3f3f3;
+  border-radius: 50%;
+}
+.MemberShip .MemberShip--contWrap .list li .icon img {
+  position: relative;
+  max-width: 100%;
+  z-index: 2;
+}
+.MemberShip .MemberShip--contWrap .list li .tit {
+  font-size: 18px;
+  font-family: 'SDNeoM';
+  display: block;
+  margin-top: 30px;
+  color: #222;
+}
+.MemberShip .MemberShip--contWrap .list li span {
+  font-size: 14px;
+  color: #777;
+}
+
+
+/* HEADER-FIXED (FadeIn, FadeOut) */
+.fix--head {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 78px;
+  background-color: rgba(18, 181, 96, .9);
+  z-index: 100;
+}
+.fix--head .inner {
+  position: relative;
+  min-width: 1024px;
+  max-width: 1280px;
+  margin: 0 auto;
+  display: flex;
+  height: 100%;
+  align-items: center;
+}
+.fix--head #nav-icon {
+  position: relative;
+  width: 25px;
+  height: 19px;
+  cursor: pointer;
+}
+.fix--head #nav-icon span {
+  display: block;
+  position: absolute;
+  height: 1px;
+  width: 100%;
+  background-color: #fff;
+  border-radius: 5px;
+  opacity: 1;
+  left: 0;
+  transition: .25s ease-in-out;
+}
+.fix--head #nav-icon span:nth-child(1) {
+  top: 0;
+}
+.fix--head #nav-icon span:nth-child(2) {
+  top: 9px;
+}
+.fix--head #nav-icon span:nth-child(3) {
+  top: 18px;
+}
+.fix--head .inner .logo {
+  margin-left: 38px;
+}
+.fix--head .inner .logo img {
+  vertical-align: top;
+  border: 0;
+}
+.fix--head .inner .right {
+  position: absolute;
+  top: 20px;
+  right: 0;
+  display: flex;
+}
+.fix--head .inner .g_search {
+  position: relative;
+  width: 370px;
+  height: 34px;
+  padding-right: 40px;
+  border-bottom: 2px solid #d9d9d9;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+.fix--head .inner .g_search .inputTxt {
+  width: 100%;
+  height: 34px;
+  border: 0;
+  font-size: 16px;
+  font-family: 'SDNeoL', 'notoL';
+  padding-left: 2px;
+  background-color: transparent;
+  color: #fff;
+}
+.fix--head .inner .g_search .inputTxt::placeholder {
+  color: #fff;
+}
+.fix--head .inner .g_search .btnSearch {
+  position: absolute;
+  top: 7px;
+  right: 0;
+  width: 20px;
+  height: 21px;
+  background: url("https://images.innisfree.co.kr/resources/web2/images/common/btn_g_search.png") no-repeat 0 50%;
+}
+.fix--head .inner .list_myutil {
+  position: relative;
+  display: flex;
+  align-items: center;
+  margin-left: 48px;
+}
+.fix--head .inner .list_myutil > li {
+  position: relative;
+  margin-right: 20px;
+}
+.fix--head .inner .list_myutil > li:last-child {
+  margin-right: 0;
+}
+.fix--head .inner .list_myutil > li > a {
+  font-size: 14px;
+  font-family: 'SDNeoL', 'notoR';
+  color: #fff;
+}
+.fix--head .inner .list_myutil .btnCart em {
+  display: inline-block;
+  margin-left: 5px;
+  width: 18px;
+  height: 18px;
+  line-height: 19px;
+  border-radius: 50%;
+  background-color: #222;
+  color: #fff;
+  font-family: 'roboR';
+  font-size: 14px;
+  text-align: center;
+}
+
+
+/* ASIDE */
+.floatingMenu {
+  position: fixed;
+  top: 70px;
+  right: 42%;
+  margin-right: -780px;
+  z-index: 10;
+}
+.floatingMenu .innerWrap {
+  width: 100px;
+  margin: 37px 0 0;
+  text-align: center;
+}
+.floatingMenu .pdtList {
+  position: relative;
+  float: right;
+  margin: 0 0 15px;
+  background-color: #fff;
+  text-align: left;
+  transition: all .3s;
+}
+.floatingMenu .pdtList.hideList {
+  width: 98px;
+  border: 1px solid #dcdcdc;
+}
+.floatingMenu .pdtList.hideList .pdtHistoryTit {
+  margin: 10px 0 15px 25px;
+  margin-left: 0;
+  text-align: center;
+  font: 16px/1.2 'SDNeoL', 'notoR';
+  color: #333;
+}
+.floatingMenu .pdtList.hideList .list {
+  max-height: 470px;
+  overflow: visible;
+}
+.floatingMenu .pdtList.hideList .list li.nonList {
+  display: block;
+  position: relative;
+  height: 74px;
+  padding: 20px 0 0;
+  font-size: 12px;
+  text-align: center;
+}
+.floatingMenu .btnDocTop {
+  width: 100%;
+  height: 35px;
+  border: 1px solid #dcdcdc;
+  background: #fff url("https://images.innisfree.co.kr/resources/web2/images/common/btn_doc_top.png") no-repeat 50% 50%;
+  overflow: visible;
+  cursor: pointer;
+  border-radius: 0;
+}
+
+
+/* FOOTER */
+footer {
+  padding: 0 0 80px;
+  border-top: 1px solid #dbdbdb;
+}
+footer .menuWrap {
+  border-bottom: 1px solid #dbdbdb;
+}
+footer .menuWrap .menuWrpa__menu {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 64px;
+  min-width: 1024px;
+  max-width: 1280px;
+  margin: 0 auto;
+}
+footer .menuWrap nav {
+  padding: 15px 0 15px 0;
+  margin-left: -16px;
+}
+footer .menuWrap nav > a {
+  position: relative;
+  margin-left: 16px;
+  color: #222;
+  font-family: 'Malgun Gothic';
+}
+footer .menuWrap nav strong {
+  font-family: 'SDNeoM', 'notoM';
+  color: #000;
+}
+footer .snsIcon {
+  opacity: .8;
+}
+footer .snsIcon [class*="btn"] {
+  display: inline-block;
+  vertical-align: middle;
+}
+footer .snsIcon [class*="btn"] + [class*="btn"] {
+  margin-left: 16px;
+}
+footer .snsIcon [class*="btn"] a {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+footer .snsIcon .btn-Youtube {
+  width: 32px;
+  height: 22px;
+  background: url("https://images.innisfree.co.kr/resources/web2/images/common/icon_youtube.png") no-repeat;
+}
+footer .snsIcon .btn-Instargram {
+  width: 28px;
+  height: 28px;
+  background: url("https://images.innisfree.co.kr/resources/web2/images/common/icon_instagram.png") no-repeat;
+}
+footer .snsIcon .btn-Facebook {
+  width: 15px;
+  height: 28px;
+  background: url("https://images.innisfree.co.kr/resources/web2/images/common/icon_facebook.png") no-repeat;
+}
+footer .snsIcon .btn-Twitter {
+  width: 28px;
+  height: 24px;
+  background: url("https://images.innisfree.co.kr/resources/web2/images/common/icon_twitter.png") no-repeat;
+}
+footer .snsIcon .btn-App {
+  width: 24px;
+  height: 31px;
+  background: url("https://images.innisfree.co.kr/resources/web2/images/common/icon_app.png") no-repeat;
+}
+footer .menuWrap__ftinfo {
+  display: flex;
+  justify-content: space-between;
+  padding: 54px 0 0;
+  margin: 0 auto;
+  min-width: 1024px;
+  max-width: 1280px;
+  background: url("https://images.innisfree.co.kr/resources/web2/images/common/logo_footer.png") no-repeat 0 34px;
+}
+footer .menuWrap__ftinfo .info {
+  overflow: hidden;
+  margin: 16px 0 0;
+  font: 14px/1.7 'SDNeoL', 'notoL';
+}
+footer .menuWrap__ftinfo .info .inner {
+  margin-left: -13px;
+}
+footer .menuWrap__ftinfo .info .inner span {
+  position: relative;
+  display: inline-block;
+  margin-left: 13px;
+}
+footer .menuWrap__ftinfo .info .inner span::after {
+  content: '';
+  position: absolute;
+  top: 7px;
+  left: -8px;
+  width: 1px;
+  height: 10px;
+  background-color: #ccc;
+}
+footer .menuWrap__ftinfo .info .inner span a {
+  color: #777;
+}
+footer .menuWrap__ftinfo .info .Paytoss {
+  margin: 9px 0 0;
+  font-size: 14px;
+}
+footer .menuWrap__ftinfo .info .Paytoss strong {
+  color: #222;
+  font-family: 'Malgun Gothic';
+  font-weight: 600;
+}
+footer .menuWrap__ftinfo .info .Paytoss em {
+  color: #777;
+}
+footer .menuWrap__ftinfo .info .Paytoss button {
+  text-decoration: underline;
+  color: #222;
+}
+footer .menuWrap__ftinfo .info .copyright {
+  margin-top: 10px;
+}
+footer .menuWrap__ftinfo .info .awards {
+  padding-left: 42px;
+  margin-top: 12px;
+  line-height: 20px;
+  background: url("https://images.innisfree.co.kr/resources/web2/images/common/awards_footer.png") no-repeat left top;
+}
+footer .menuWrap__ftinfo .info-2 {
+  width: 380px;
+  height: 212px;
+  padding: 31px;
+  background-color: #f3f3f3;
+  box-sizing: border-box;
+}
+footer .menuWrap__ftinfo .info-2 dl dt {
+  color: #555;
+}
+footer .menuWrap__ftinfo .info-2 dl dd {
+  font-size: 14px;
+}
+footer .menuWrap__ftinfo .info-2 dl dd strong {
+  font: 30px/1.6 'roboM';
+  color: #555;
+  margin-right: 5px;
+}
+footer .menuWrap__ftinfo .info-2 dl dd a.btn {
+  display: flex;
+  align-items: center;
+  width: 110px;
+  height: 32px;
+  margin-top: 11px;
+  color: #222;
+  border: 1px solid #222;
+  box-sizing: border-box;
+  padding-left: 18px;
+  background: url("https://images.innisfree.co.kr/resources/web2/images/common/arw_link_bs.png") no-repeat right 15px center;
+}
\ No newline at end of file
diff --git a/images/.DS_Store b/images/.DS_Store
new file mode 100644
index 00000000..e52dfb6d
Binary files /dev/null and b/images/.DS_Store differ
diff --git a/images/20856_l1_S_450.jpg b/images/20856_l1_S_450.jpg
new file mode 100644
index 00000000..bae7c4ed
Binary files /dev/null and b/images/20856_l1_S_450.jpg differ
diff --git a/images/20856_l_S_450.jpg b/images/20856_l_S_450.jpg
new file mode 100644
index 00000000..38933280
Binary files /dev/null and b/images/20856_l_S_450.jpg differ
diff --git a/images/24078_l1_S_450.jpg b/images/24078_l1_S_450.jpg
new file mode 100644
index 00000000..317677e4
Binary files /dev/null and b/images/24078_l1_S_450.jpg differ
diff --git a/images/24078_l_S_450.jpg b/images/24078_l_S_450.jpg
new file mode 100644
index 00000000..e1f79b17
Binary files /dev/null and b/images/24078_l_S_450.jpg differ
diff --git a/images/25636_l1_S_320.jpg b/images/25636_l1_S_320.jpg
new file mode 100644
index 00000000..84cb9b99
Binary files /dev/null and b/images/25636_l1_S_320.jpg differ
diff --git a/images/25636_l_S_320.jpg b/images/25636_l_S_320.jpg
new file mode 100644
index 00000000..1e420dfd
Binary files /dev/null and b/images/25636_l_S_320.jpg differ
diff --git a/images/25796_l1_S_320.jpg b/images/25796_l1_S_320.jpg
new file mode 100644
index 00000000..5db7a0ac
Binary files /dev/null and b/images/25796_l1_S_320.jpg differ
diff --git a/images/25796_l_S_320.jpg b/images/25796_l_S_320.jpg
new file mode 100644
index 00000000..aeced23d
Binary files /dev/null and b/images/25796_l_S_320.jpg differ
diff --git a/images/29057_l1_S_320.jpg b/images/29057_l1_S_320.jpg
new file mode 100644
index 00000000..7feadc67
Binary files /dev/null and b/images/29057_l1_S_320.jpg differ
diff --git a/images/29057_l_S_320.jpg b/images/29057_l_S_320.jpg
new file mode 100644
index 00000000..aea88166
Binary files /dev/null and b/images/29057_l_S_320.jpg differ
diff --git a/images/32082_l1_S_320.jpg b/images/32082_l1_S_320.jpg
new file mode 100644
index 00000000..4254448a
Binary files /dev/null and b/images/32082_l1_S_320.jpg differ
diff --git a/images/32082_l_S_320.jpg b/images/32082_l_S_320.jpg
new file mode 100644
index 00000000..6fbd9bda
Binary files /dev/null and b/images/32082_l_S_320.jpg differ
diff --git a/images/32296_l1_S_320.jpg b/images/32296_l1_S_320.jpg
new file mode 100644
index 00000000..71879856
Binary files /dev/null and b/images/32296_l1_S_320.jpg differ
diff --git a/images/32296_l1_S_450.jpg b/images/32296_l1_S_450.jpg
new file mode 100644
index 00000000..0dfafdc7
Binary files /dev/null and b/images/32296_l1_S_450.jpg differ
diff --git a/images/32296_l_S_320.jpg b/images/32296_l_S_320.jpg
new file mode 100644
index 00000000..7a829d61
Binary files /dev/null and b/images/32296_l_S_320.jpg differ
diff --git a/images/32296_l_S_450.jpg b/images/32296_l_S_450.jpg
new file mode 100644
index 00000000..d1c548f7
Binary files /dev/null and b/images/32296_l_S_450.jpg differ
diff --git a/images/33957_l1_S_320.jpg b/images/33957_l1_S_320.jpg
new file mode 100644
index 00000000..7376c0fe
Binary files /dev/null and b/images/33957_l1_S_320.jpg differ
diff --git a/images/33957_l1_S_450.jpg b/images/33957_l1_S_450.jpg
new file mode 100644
index 00000000..9c41a0c5
Binary files /dev/null and b/images/33957_l1_S_450.jpg differ
diff --git a/images/33957_l_S_320.jpg b/images/33957_l_S_320.jpg
new file mode 100644
index 00000000..f2ee95c7
Binary files /dev/null and b/images/33957_l_S_320.jpg differ
diff --git a/images/33957_l_S_450.jpg b/images/33957_l_S_450.jpg
new file mode 100644
index 00000000..1e31aa41
Binary files /dev/null and b/images/33957_l_S_450.jpg differ
diff --git a/images/34116_p1_S_450.jpg b/images/34116_p1_S_450.jpg
new file mode 100644
index 00000000..78172dde
Binary files /dev/null and b/images/34116_p1_S_450.jpg differ
diff --git a/images/34116_p_S_450.jpg b/images/34116_p_S_450.jpg
new file mode 100644
index 00000000..adf8cb32
Binary files /dev/null and b/images/34116_p_S_450.jpg differ
diff --git a/images/34497_p1_S_320.jpg b/images/34497_p1_S_320.jpg
new file mode 100644
index 00000000..1516d51d
Binary files /dev/null and b/images/34497_p1_S_320.jpg differ
diff --git a/images/34497_p1_S_450.jpg b/images/34497_p1_S_450.jpg
new file mode 100644
index 00000000..b204182c
Binary files /dev/null and b/images/34497_p1_S_450.jpg differ
diff --git a/images/34497_p_S_320.jpg b/images/34497_p_S_320.jpg
new file mode 100644
index 00000000..c6bb57f0
Binary files /dev/null and b/images/34497_p_S_320.jpg differ
diff --git a/images/34497_p_S_450.jpg b/images/34497_p_S_450.jpg
new file mode 100644
index 00000000..f0560511
Binary files /dev/null and b/images/34497_p_S_450.jpg differ
diff --git a/images/34498_l1_S_450.jpg b/images/34498_l1_S_450.jpg
new file mode 100644
index 00000000..f306be0d
Binary files /dev/null and b/images/34498_l1_S_450.jpg differ
diff --git a/images/34498_l_S_450.jpg b/images/34498_l_S_450.jpg
new file mode 100644
index 00000000..fa9f1d7b
Binary files /dev/null and b/images/34498_l_S_450.jpg differ
diff --git a/images/34500_l1_S_450.jpg b/images/34500_l1_S_450.jpg
new file mode 100644
index 00000000..8f82b31c
Binary files /dev/null and b/images/34500_l1_S_450.jpg differ
diff --git a/images/34500_l_S_450.jpg b/images/34500_l_S_450.jpg
new file mode 100644
index 00000000..f0ca3945
Binary files /dev/null and b/images/34500_l_S_450.jpg differ
diff --git a/images/34510_l1_S_320.jpg b/images/34510_l1_S_320.jpg
new file mode 100644
index 00000000..b37d80d3
Binary files /dev/null and b/images/34510_l1_S_320.jpg differ
diff --git a/images/34510_l1_S_450.jpg b/images/34510_l1_S_450.jpg
new file mode 100644
index 00000000..eda112fb
Binary files /dev/null and b/images/34510_l1_S_450.jpg differ
diff --git a/images/34510_l_S_320.jpg b/images/34510_l_S_320.jpg
new file mode 100644
index 00000000..fe5ce122
Binary files /dev/null and b/images/34510_l_S_320.jpg differ
diff --git a/images/34510_l_S_450.jpg b/images/34510_l_S_450.jpg
new file mode 100644
index 00000000..5249fea1
Binary files /dev/null and b/images/34510_l_S_450.jpg differ
diff --git a/images/34511_l1_S_320.jpg b/images/34511_l1_S_320.jpg
new file mode 100644
index 00000000..3cca9fc7
Binary files /dev/null and b/images/34511_l1_S_320.jpg differ
diff --git a/images/34511_l1_S_450.jpg b/images/34511_l1_S_450.jpg
new file mode 100644
index 00000000..219f41da
Binary files /dev/null and b/images/34511_l1_S_450.jpg differ
diff --git a/images/34511_l_S_320.jpg b/images/34511_l_S_320.jpg
new file mode 100644
index 00000000..22915041
Binary files /dev/null and b/images/34511_l_S_320.jpg differ
diff --git a/images/34511_l_S_450.jpg b/images/34511_l_S_450.jpg
new file mode 100644
index 00000000..8d0514d9
Binary files /dev/null and b/images/34511_l_S_450.jpg differ
diff --git a/images/34513_l1_S_320.jpg b/images/34513_l1_S_320.jpg
new file mode 100644
index 00000000..12eed657
Binary files /dev/null and b/images/34513_l1_S_320.jpg differ
diff --git a/images/34513_l_S_320.jpg b/images/34513_l_S_320.jpg
new file mode 100644
index 00000000..f1bd9281
Binary files /dev/null and b/images/34513_l_S_320.jpg differ
diff --git a/images/34516_l1_S_320.jpg b/images/34516_l1_S_320.jpg
new file mode 100644
index 00000000..df738cb2
Binary files /dev/null and b/images/34516_l1_S_320.jpg differ
diff --git a/images/34516_l_S_320.jpg b/images/34516_l_S_320.jpg
new file mode 100644
index 00000000..33c5767a
Binary files /dev/null and b/images/34516_l_S_320.jpg differ
diff --git a/images/34517_l1_S_450.jpg b/images/34517_l1_S_450.jpg
new file mode 100644
index 00000000..42ae5eb8
Binary files /dev/null and b/images/34517_l1_S_450.jpg differ
diff --git a/images/34521_l1_S_450.jpg b/images/34521_l1_S_450.jpg
new file mode 100644
index 00000000..f8107d6a
Binary files /dev/null and b/images/34521_l1_S_450.jpg differ
diff --git a/images/34536_p_S_320.jpg b/images/34536_p_S_320.jpg
new file mode 100644
index 00000000..1d1a4371
Binary files /dev/null and b/images/34536_p_S_320.jpg differ
diff --git a/images/34616_l1_S_450.png b/images/34616_l1_S_450.png
new file mode 100644
index 00000000..0c4c6de7
Binary files /dev/null and b/images/34616_l1_S_450.png differ
diff --git a/images/34616_l_S_450.jpg b/images/34616_l_S_450.jpg
new file mode 100644
index 00000000..c069ddb2
Binary files /dev/null and b/images/34616_l_S_450.jpg differ
diff --git a/images/47_2.jpg b/images/47_2.jpg
new file mode 100644
index 00000000..82b1bc88
Binary files /dev/null and b/images/47_2.jpg differ
diff --git a/images/48_2.jpg b/images/48_2.jpg
new file mode 100644
index 00000000..128f9894
Binary files /dev/null and b/images/48_2.jpg differ
diff --git a/images/50_2.jpg b/images/50_2.jpg
new file mode 100644
index 00000000..5090386d
Binary files /dev/null and b/images/50_2.jpg differ
diff --git a/images/51_2.jpg b/images/51_2.jpg
new file mode 100644
index 00000000..d1663036
Binary files /dev/null and b/images/51_2.jpg differ
diff --git a/images/BM11_392_left_pc.jpg b/images/BM11_392_left_pc.jpg
new file mode 100644
index 00000000..b5666a9c
Binary files /dev/null and b/images/BM11_392_left_pc.jpg differ
diff --git a/images/BM11_408_left_pc.jpg b/images/BM11_408_left_pc.jpg
new file mode 100644
index 00000000..bdc77571
Binary files /dev/null and b/images/BM11_408_left_pc.jpg differ
diff --git a/images/BM11_410_left_pc.jpg b/images/BM11_410_left_pc.jpg
new file mode 100644
index 00000000..7846b96b
Binary files /dev/null and b/images/BM11_410_left_pc.jpg differ
diff --git a/images/BM11_411_left_pc.jpg b/images/BM11_411_left_pc.jpg
new file mode 100644
index 00000000..0ec9b631
Binary files /dev/null and b/images/BM11_411_left_pc.jpg differ
diff --git a/images/BM11_412_left_pc.jpg b/images/BM11_412_left_pc.jpg
new file mode 100644
index 00000000..1bf90872
Binary files /dev/null and b/images/BM11_412_left_pc.jpg differ
diff --git a/images/BM11_413_left_pc.jpg b/images/BM11_413_left_pc.jpg
new file mode 100644
index 00000000..3321ccb3
Binary files /dev/null and b/images/BM11_413_left_pc.jpg differ
diff --git a/images/arw_link_bs.png b/images/arw_link_bs.png
new file mode 100644
index 00000000..8274566a
Binary files /dev/null and b/images/arw_link_bs.png differ
diff --git a/images/awards_footer.png b/images/awards_footer.png
new file mode 100644
index 00000000..751012b8
Binary files /dev/null and b/images/awards_footer.png differ
diff --git a/images/btn_doc_top.png b/images/btn_doc_top.png
new file mode 100644
index 00000000..0dce28ed
Binary files /dev/null and b/images/btn_doc_top.png differ
diff --git a/images/btn_g_search.png b/images/btn_g_search.png
new file mode 100644
index 00000000..fe7973a0
Binary files /dev/null and b/images/btn_g_search.png differ
diff --git a/images/btn_top_banner_close2.png b/images/btn_top_banner_close2.png
new file mode 100644
index 00000000..47245de5
Binary files /dev/null and b/images/btn_top_banner_close2.png differ
diff --git a/images/depth2_arr.png b/images/depth2_arr.png
new file mode 100644
index 00000000..1436c2bd
Binary files /dev/null and b/images/depth2_arr.png differ
diff --git a/images/fou_tit.png b/images/fou_tit.png
new file mode 100644
index 00000000..a6366b76
Binary files /dev/null and b/images/fou_tit.png differ
diff --git a/images/icon_app.png b/images/icon_app.png
new file mode 100644
index 00000000..e6b16050
Binary files /dev/null and b/images/icon_app.png differ
diff --git a/images/icon_facebook.png b/images/icon_facebook.png
new file mode 100644
index 00000000..a7dae957
Binary files /dev/null and b/images/icon_facebook.png differ
diff --git a/images/icon_instagram.png b/images/icon_instagram.png
new file mode 100644
index 00000000..42284f1f
Binary files /dev/null and b/images/icon_instagram.png differ
diff --git a/images/icon_listut_1.png b/images/icon_listut_1.png
new file mode 100644
index 00000000..f8f4719c
Binary files /dev/null and b/images/icon_listut_1.png differ
diff --git a/images/icon_listut_2.png b/images/icon_listut_2.png
new file mode 100644
index 00000000..ffa68680
Binary files /dev/null and b/images/icon_listut_2.png differ
diff --git a/images/icon_listut_3.png b/images/icon_listut_3.png
new file mode 100644
index 00000000..0f8ae9a5
Binary files /dev/null and b/images/icon_listut_3.png differ
diff --git a/images/icon_listut_4.png b/images/icon_listut_4.png
new file mode 100644
index 00000000..2a743aa5
Binary files /dev/null and b/images/icon_listut_4.png differ
diff --git a/images/icon_m_refresh.png b/images/icon_m_refresh.png
new file mode 100644
index 00000000..f803ef1b
Binary files /dev/null and b/images/icon_m_refresh.png differ
diff --git a/images/icon_m_w_right.png b/images/icon_m_w_right.png
new file mode 100644
index 00000000..06ace9ec
Binary files /dev/null and b/images/icon_m_w_right.png differ
diff --git a/images/icon_mb1.png b/images/icon_mb1.png
new file mode 100644
index 00000000..0f48f5df
Binary files /dev/null and b/images/icon_mb1.png differ
diff --git a/images/icon_mb3.png b/images/icon_mb3.png
new file mode 100644
index 00000000..a5fee80f
Binary files /dev/null and b/images/icon_mb3.png differ
diff --git a/images/icon_mb4.png b/images/icon_mb4.png
new file mode 100644
index 00000000..8efc36fd
Binary files /dev/null and b/images/icon_mb4.png differ
diff --git a/images/icon_mb7.png b/images/icon_mb7.png
new file mode 100644
index 00000000..c577eefe
Binary files /dev/null and b/images/icon_mb7.png differ
diff --git a/images/icon_mb8.png b/images/icon_mb8.png
new file mode 100644
index 00000000..4d0e3a32
Binary files /dev/null and b/images/icon_mb8.png differ
diff --git a/images/icon_more.png b/images/icon_more.png
new file mode 100644
index 00000000..35444ebd
Binary files /dev/null and b/images/icon_more.png differ
diff --git a/images/icon_s_drop_open.png b/images/icon_s_drop_open.png
new file mode 100644
index 00000000..45598f45
Binary files /dev/null and b/images/icon_s_drop_open.png differ
diff --git a/images/icon_search.png b/images/icon_search.png
new file mode 100644
index 00000000..291af361
Binary files /dev/null and b/images/icon_search.png differ
diff --git a/images/icon_starM.png b/images/icon_starM.png
new file mode 100644
index 00000000..e91a318a
Binary files /dev/null and b/images/icon_starM.png differ
diff --git a/images/icon_twitter.png b/images/icon_twitter.png
new file mode 100644
index 00000000..ffb9c748
Binary files /dev/null and b/images/icon_twitter.png differ
diff --git a/images/icon_youtube.png b/images/icon_youtube.png
new file mode 100644
index 00000000..02834e92
Binary files /dev/null and b/images/icon_youtube.png differ
diff --git a/images/logo_basic.png b/images/logo_basic.png
new file mode 100644
index 00000000..d03c9bb5
Binary files /dev/null and b/images/logo_basic.png differ
diff --git a/images/logo_footer.png b/images/logo_footer.png
new file mode 100644
index 00000000..4f9d6bf2
Binary files /dev/null and b/images/logo_footer.png differ
diff --git a/images/logo_white.png b/images/logo_white.png
new file mode 100644
index 00000000..db5a6296
Binary files /dev/null and b/images/logo_white.png differ
diff --git a/images/sprd_left.png b/images/sprd_left.png
new file mode 100644
index 00000000..6bfa2c7b
Binary files /dev/null and b/images/sprd_left.png differ
diff --git a/images/sprd_right.png b/images/sprd_right.png
new file mode 100644
index 00000000..987bf0e8
Binary files /dev/null and b/images/sprd_right.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..dfb323f5
--- /dev/null
+++ b/index.html
@@ -0,0 +1,1404 @@
+<!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">
+  <meta http-equiv="Content-Type" content="application/octet-stream; charset=utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+
+  <meta name="generator" content="editplus" />
+  <meta name="keywords" content="화장품 쇼핑몰 스킨케어 메이크업 마스크팩 바디 헤어 남성화장품 맨스토어 마이쿠션 추천제품기획전 이벤트" />
+  <meta name="subject" content="" />
+  <meta name="description" content="무한한 자연의 에너지를 탐구해 건강한 아름다움을 전하는 고효능 자연주의 브랜드 이니스프리 | INNISFREE" />
+  <meta name="title" content="이니스프리 | INNISFREE" />
+
+  <meta name="author" content="" />
+  <meta name="copyright" content="" />
+  <meta name="writer" content="" />
+  <meta name="language" content="" />
+  <meta name="build" content="" />
+  <meta name="naver-site-verification" content="36ffa55966fa95b9d02fbf20282d0460d5bf2f31" />
+
+  <!-- OPEN GRAPH -->
+  <meta property="og:type" content="website" />
+  <meta property="og:title" content="이니스프리 | INNISFREE" />
+  <meta property="og:description" content="무한한 자연의 에너지를 탐구해 건강한 아름다움을 전하는 고효능 자연주의 브랜드 이니스프리 | INNISFREE" />
+  <meta property="og:url" content="https://www.innisfree.com/kr/ko/Main.do?utm_medium=sa&utm_source=google&utm_campaign=madit_conversion_al_brd_test&utm_term=%EC%9D%B4%EB%8B%88%EC%8A%A4%ED%94%84%EB%A6%AC&utm_content=na&utm_trg=brand&gclid=CjwKCAjwoIqhBhAGEiwArXT7K2B26d6FSkLXrhs7XHhlT55wpwGVAj9TuyCzPE-L2rgHHp0YQOpAIhoCdOsQAvD_BwE" />
+  <meta property="og:image" content="https://images.innisfree.co.kr/resources/web/images/brand/logo.png" />
+  <meta property="og:locale" content="ko_KR" />
+
+  <!-- TWITTER -->
+  <meta property="twitter:card" content="summary" />
+  <meta property="twitter:title" content="이니스프리 | INNISFREE" />
+  <meta property="twitter:description" content="무한한 자연의 에너지를 탐구해 건강한 아름다움을 전하는 고효능 자연주의 브랜드 이니스프리 | INNISFREE" />
+  <meta property="twitter:url"
+    content="https://www.innisfree.com/kr/ko/Main.do?utm_medium=sa&utm_source=google&utm_campaign=madit_conversion_al_brd_test&utm_term=%EC%9D%B4%EB%8B%88%EC%8A%A4%ED%94%84%EB%A6%AC&utm_content=na&utm_trg=brand&gclid=CjwKCAjwoIqhBhAGEiwArXT7K2B26d6FSkLXrhs7XHhlT55wpwGVAj9TuyCzPE-L2rgHHp0YQOpAIhoCdOsQAvD_BwE" />
+  <meta property="twitter:image" content="https://images.innisfree.co.kr/resources/web/images/brand/logo.png" />
+
+  <!-- FONT CDN -->
+  <link rel="stylesheet" href="https://images.innisfree.co.kr/resources/fonts/SDGtNeobUni/fonts.css" />
+
+  <!-- FAVICON -->
+  <link href="https://images.innisfree.co.kr/resources/web2/images/common/favicon.ico?ver=202302" rel="shortcut icon" />
+
+  <!-- SWIPER CDN -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/9.1.1/swiper-bundle.min.js"
+    integrity="sha512-J0i98QZsJc12MkNEyDbinrKKoe7Jiw0rtryAXBesZrVwRkaqgP9QNCPyo5sMZ2jfiJQb+9RIE4I3xNl8fFqQIA=="
+    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
+  <!-- JQUERY CDN -->
+  <script src="https://code.jquery.com/jquery-3.6.4.js" integrity="sha256-a9jBBRygX1Bh5lt8GZjXDzyOB+bWve9EiO7tROUtj/E=" crossorigin="anonymous"></script>
+
+  <!-- RESET CDN -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css" />
+
+  <link rel="stylesheet" href="css/style.css" />
+
+  <title>이니스프리 | INNISFREE</title>
+
+  <script defer src="js/script.js"></script>
+</head>
+
+<body>
+
+  <div class="container">
+    <!-- HEADER -->
+    <header>
+      <!-- HEADER--banner -->
+      <div class="banner">
+        <div class="contWrap">
+          <a href="javascript:void(0)"><span class="txt">오늘 마지막, 신한카드로 결제하면 6천원 캐시백</span></a>
+        </div>
+      </div>
+      <!-- HEADER--myutil -->
+      <div class="myutil">
+        <div class="inner">
+          <ul class="list__util">
+            <li class="util_about">
+              <a href="javascript:void(0)">고객센터</a>
+            </li>
+            <li class="util_about">
+              <a href="javascriipt:void(0)">ABOUT US</a>
+            </li>
+            <li class="util_about">
+              <a href="javascript:void(0)" class="login">로그인</a>
+            </li>
+            <li class="util_about">
+              <a href="javascript:void(0)">회원가입</a>
+            </li>
+            <li class="util_about">
+              <a href="javascript:void(0)">마이페이지</a>
+            </li>
+            <li class="util_about">
+              <a href="javascript:void(0)">장바구니<em id="cart">0</em></a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <!-- HEADER--GNBMENU -->
+      <div class="gnbmenu">
+        <div class="inner">
+          <div class="logo">
+            <a href="javascript:void(0)"><img src="images/logo_basic.png" alt="로고" /></a>
+          </div>
+          <div class="search">
+            <fieldset class="keywordInput">
+              <form name="topSearchFrm" id="topSearchFrm">
+                <input class="inpitTxt" placeholder="BC카드 마이태그하면 5천원 결제일 할인!"></input>
+              </form>
+            </fieldset>
+            <button type="button" class="btnSearch"></button>
+          </div>
+          <!-- NAV -->
+          <nav class="gnbnew">
+            <ul class="gnblist">
+              <li>
+                <a href="javascript:void(0)">특가</a>
+                <span class="hit"></span>
+              </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)">FOR U</a></li>
+            </ul>
+          </nav>
+        </div>
+      </div>
+      <!-- HEADER--category -->
+      <div class="category">
+        <div class="inner">
+          <ul class="cateList">
+            <li class="cateL active">
+              <a href="javascript:void(0)">스킨케어</a>
+              <div class="catedetail">
+                <ul id="submenu">
+                  <li id="submenu-det1">
+                    <a href="javascript:void(0)">에센스/세럼/앰플</a>
+                    <a href="javascript:void(0)">로션/크림</a>
+                    <a href="javascript:void(0)">스킨/토너/미스트</a>
+                    <a href="javascript:void(0)">선케어</a>
+                    <a href="javascript:void(0)">클렌징</a>
+                  </li>
+                  <li id="submenu-det2">
+                    <a href="javascript:void(0)">팩/마스크</a>
+                    <a href="javascript:void(0)">립/아이케어</a>
+                    <a href="javascript:void(0)">오일/마사지</a>
+                    <a href="javascript:void(0)">기획 세트</a>
+                    <a href="javascript:void(0)">기타</a>
+                  </li>
+                </ul>
+              </div>
+            </li>
+            <li class="cateL">
+              <a href="javascript:void(0)">메이크업</a>
+              <div class="catedetail">
+                <ul id="submenu">
+                  <li id="submenu-det1">
+                    <a href="javascript:void(0)">페이스메이크업</a>
+                    <a href="javascript:void(0)">아이메이크업</a>
+                    <a href="javascript:void(0)">립메이크업</a>
+                    <a href="javascript:void(0)">네일</a>
+                  </li>
+                  <li id="submenu-det2"></li>
+                  <li id="submenu-det3"></li>
+                  <li id="submenu-det4"></li>
+                </ul>
+              </div>
+            </li>
+            <li class="cateL">
+              <a href="javascript:void(0)">남성</a>
+              <div class="catedetail">
+                <ul id="submenu">
+                  <li id="submenu-det1">
+                    <a href="javascript:void(0)">스킨케어</a>
+                    <a href="javascript:void(0)">클렌징</a>
+                    <a href="javascript:void(0)">선케어</a>
+                    <a href="javascript:void(0)">헤어 스타일링</a>
+                    <a href="javascript:void(0)">기획세트</a>
+                  </li>
+                  <li id="submenu-det2"></li>
+                  <li id="submenu-det3"></li>
+                  <li id="submenu-det4"></li>
+                </ul>
+              </div>
+            </li>
+            <li class="cateL">
+              <a href="javascript:void(0)">헤어/바디</a>
+              <div class="catedetail">
+                <ul id="submenu">
+                  <li id="submenu-det1">
+                    <a href="javascript:void(0)">핸드/풋케어</a>
+                    <a href="javascript:void(0)">바디 로션/미스트</a>
+                    <a href="javascript:void(0)">바디 워시/청결제</a>
+                    <a href="javascript:void(0)">헤어 에센스/미스트</a>
+                    <a href="javascript:void(0)">샴푸/트리트먼트</a>
+                  </li>
+                  <li id="submenu-det2"></li>
+                  <li id="submenu-det3"></li>
+                  <li id="submenu-det4"></li>
+                </ul>
+              </div>
+            </li>
+            <li class="cateL">
+              <a href="javascript:void(0)">기획 세트</a>
+              <div class="catedetail">
+                <ul id="submenu">
+                  <li id="submenu-det1">
+                    <a href="javascript:void(0)">기획 세트</a>
+                  </li>
+                  <li id="submenu-det2"></li>
+                  <li id="submenu-det3"></li>
+                  <li id="submenu-det4"></li>
+                </ul>
+              </div>
+            </li>
+            <li class="cateL">
+              <a href="javascript:void(0)">미용소품</a>
+              <div class="catedetail">
+                <ul id="submenu">
+                  <li id="submenu-det1">
+                    <a href="javascript:void(0)">네일 소품</a>
+                    <a href="javascript:void(0)">헤어/바디 소품</a>
+                    <a href="javascript:void(0)">화장솜/면봉/기름종이</a>
+                    <a href="javascript:void(0)">클렌징 소품</a>
+                    <a href="javascript:void(0)">기타 소품</a>
+                  </li>
+                  <li id="submenu-det2"></li>
+                  <li id="submenu-det3"></li>
+                  <li id="submenu-det4"></li>
+                </ul>
+              </div>
+            </li>
+            <li class="cateL">
+              <a href="javascript:void(0)">피부고민</a>
+              <div class="catedetail">
+                <ul id="submenu">
+                  <li id="submenu-det1">
+                    <a href="javascript:void(0)">수분/보습/속건조</a>
+                    <a href="javascript:void(0)">모공/피지/블랙헤드</a>
+                    <a href="javascript:void(0)">주름/탄력</a>
+                    <a href="javascript:void(0)">트러블/리페어</a>
+                    <a href="javascript:void(0)">각질/피부결</a>
+                    <a href="javascript:void(0)">잡티/피부톤</a>
+                    <a href="javascript:void(0)">영양/토탈안티에이징</a>
+                  </li>
+                  <li id="submenu-det2">
+                    <a href="javascript:void(0)">진정/민감</a>
+                  </li>
+                  <li id="submenu-det3"></li>
+                  <li id="submenu-det4"></li>
+                </ul>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </header>
+
+    <!-- SECTION-이벤트 슬라이드 : mainco로 묶은 이유는 자주 바뀌는 영역임을 고정인 HEADER와 FOOTER와 구분-->
+    <section class="mainco">
+      <div class="mainco--con">
+        <section class="eventbn">
+          <div class="slideWrap">
+            <div class="slide swiper-container">
+              <ul class="swiper-wrapper">
+                <li class="swiper-slide">
+                  <a href="javascript:void(0)">
+                    <div class="imgWrap">
+                      <img src="images/BM11_392_left_pc.jpg" alt="NEW 그린티 씨드 세럼" />
+                    </div>
+                    <div class="cntWrap">
+                      <div class="inner">
+                        <span class="tag-card">
+                          <span class="cardSt_1">24%</span>
+                          <span class="cardSt_2">사은품</span>
+                        </span>
+                        <div class="pi-name">
+                          <span style="font-family:SDNeoL">단숨에 피부 갈증 해결!</span>
+                          <span style="font-family:SDNeoM">NEW 그린티 씨드 세럼</span>
+                        </div>
+                        <div class="pi-option">
+                          <span class="price">
+                            <em class="tCost">31,000</em>
+                            <em class="tUnit">23,500</em>
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  </a>
+                </li>
+                <li class="swiper-slide">
+                  <a href="javascript:void(0)">
+                    <div class="imgWrap">
+                      <img src="images/BM11_411_left_pc.jpg" alt="뉴 그린티 히알루론산 세럼" />
+                    </div>
+                    <div class="cntWrap">
+                      <div class="inner">
+                        <span class="tag-card">
+                          <span class="cardSt_1">24%</span>
+                          <span class="cardSt_2">한정판</span>
+                          <span class="cardSt_2">사은품</span>
+                        </span>
+                        <div class="pi-name">
+                          <span style="font-family:SDNeoL">뉴 그린티 히알루론산 세럼</span>
+                          <span style="font-family:SDNeoM">뉴 그린 장원영 네컷 증정!</span>
+                        </div>
+                        <div class="pi-option">
+                          <span class="price">
+                            <em class="tCost">31,000</em>
+                            <em class="tUnit">23,500</em>
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  </a>
+                </li>
+                <li class="swiper-slide">
+                  <a href="javascript:void(0)">
+                    <div class="imgWrap">
+                      <img src="images/BM11_412_left_pc.jpg" alt="깐달걀 레티놀 시카 앰플" />
+                    </div>
+                    <div class="cntWrap">
+                      <div class="inner">
+                        <span class="tag-card">
+                          <span class="cardSt_1">20%</span>
+                          <span class="cardSt_2">사은품</span>
+                        </span>
+                        <div class="pi-name">
+                          <span style="font-family:SDNeoL">20대 판매 1위 비결</span>
+                          <span style="font-family:SDNeoM">깐달걀 레티놀 시카 앰플</span>
+                        </div>
+                        <div class="pi-option">
+                          <span class="price">
+                            <em class="tCost">40,000</em>
+                            <em class="tUnit">32,000</em>
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  </a>
+                </li>
+                <li class="swiper-slide">
+                  <a href="javascript:void(0)">
+                    <div class="imgWrap">
+                      <img src="images/BM11_413_left_pc.jpg" alt="블랙티 앰플" />
+                    </div>
+                    <div class="cntWrap">
+                      <div class="inner">
+                        <span class="tag-card">
+                          <span class="cardSt_1">20%</span>
+                          <span class="cardSt_2">사은품</span>
+                        </span>
+                        <div class="pi-name">
+                          <span style="font-family:SDNeoL">재구매율 1위</span>
+                          <span style="font-family:SDNeoM">블랙티 앰플로 쫀쫀피부 완성</span>
+                        </div>
+                        <div class="pi-option">
+                          <span class="price">
+                            <em class="tCost">38,000</em>
+                            <em class="tUnit">30,400</em>
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  </a>
+                </li>
+                <li class="swiper-slide">
+                  <a href="javascript:void(0)">
+                    <div class="imgWrap">
+                      <img src="images/BM11_408_left_pc.jpg" alt="예쁜 눈썹 #인생브로우">
+                    </div>
+                    <div class="cntWrap">
+                      <div class="inner">
+                        <span class="tag-card">
+                          <span class="cardSt_1">40%</span>
+                        </span>
+                        <div class="pi-name">
+                          <span style="font-family:SDNeoL">누구나 쉽게 그리는</span>
+                          <span style="font-family:SDNeoM">예쁜 눈썹 #인생브로우</span>
+                        </div>
+                        <div class="pi-option">
+                          <span class="price">
+                            <em class="tCost">4,500</em>
+                            <em class="tUnit">2,700</em>
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  </a>
+                </li>
+                <li class="swiper-slide">
+                  <a href="javascript:void(0)">
+                    <div class="imgWrap">
+                      <img src="images/BM11_410_left_pc.jpg" alt="가장 먼저 만나보세요!" />
+                    </div>
+                    <div class="cntWrap">
+                      <div class="inner">
+                        <span class="tag-card">
+                          <span class="cardSt_2">신제품</span>
+                        </span>
+                        <div class="pi-name">
+                          <span style="font-family:SDNeoL">거침없이 반짝이는 신제품을</span>
+                          <span style="font-family:SDNeoM">가장 먼저 만나보세요!</span>
+                        </div>
+                      </div>
+                    </div>
+                  </a>
+                </li>
+              </ul>
+            </div>
+            <div class="slideControl">
+              <div class="swiper-prev">
+                <div class="inner">
+                  <button type="button" class="swiper-button-prev"></button>
+                </div>
+              </div>
+              <div class="swiper-next">
+                <div class="inner">
+                  <button type="button" class="swiper-button-next"></button>
+                </div>
+              </div>
+            </div>
+        </section>
+
+        <!-- SECTION-실시간 인기 키워드 -->
+        <section class="live-keword">
+          <div class="inner">
+            <div class="keyword--title">
+              <div class="title__name">실시간 인기 #키워드</div>
+              <div class="title__date">2023-03-30 19:20:06 기준</div>
+            </div>
+            <div class="keyword--hashSlide">
+              <div class="slide .swiper-container">
+                <span class="shadow"></span>
+                <ul class="swiper-wrapper">
+                  <li class="swiper-slide">
+                    <span class="hashTag">
+                      <a href="javascript:void(0)">##약산성클렌저</a>
+                    </span>
+                  </li>
+                  <li class="swiper-slide">
+                    <span class="hashTag">
+                      <a href="javascript:void(0)">#블루베리</a>
+                    </span>
+                  </li>
+                  <li class="swiper-slide">
+                    <span class="hashTag">
+                      <a href="javascript:void(0)">#그린티</a>
+                    </span>
+                  </li>
+                  <li class="swiper-slide">
+                    <span class="hashTag">
+                      <a href="javascript:void(0)">#콜라겐</a>
+                    </span>
+                  </li>
+                  <li class="swiper-slide">
+                    <span class="hashTag">
+                      <a href="javascript:void(0)">#화장솜</a>
+                    </span>
+                  </li>
+                  <li class="swiper-slide">
+                    <span class="hashTag">
+                      <a href="javascript:void(0)">#매니큐어</a>
+                    </span>
+                  </li>
+                  <li class="swiper-slide">
+                    <span class="hashTag">
+                      <a href="javascript:void(0)">##항산화에센스</a>
+                    </span>
+                  </li>
+                  <li class="swiper-slide">
+                    <span class="hashTag">
+                      <a href="javascript:void(0)">#립밤</a>
+                    </span>
+                  </li>
+                  <li class="swiper-slide">
+                    <span class="hashTag">
+                      <a href="javascript:void(0)">#비자</a>
+                    </span>
+                  </li>
+                  <li class="swiper-slide">
+                    <span class="hashTag">
+                      <a href="javascript:void(0)">#노세럼</a>
+                    </span>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <!-- SECTION-지금이 쇼핑찬스 -->
+        <section class="shopch">
+          <div class="title">
+            <h4>지금이 쇼핑찬스</h4>
+            <a href="javascript:void(0)" class="link">특가 바로가기</a>
+          </div>
+          <div class="shopch__contents">
+            <ul>
+              <div>
+                <li class="shopch__list">
+                  <div class="pdtList">
+                    <div class="pdtOver">
+                      <a href="javascript:void(0)" class="pdtImg">
+                        <img src="images/34513_l_S_320.jpg" class="basic" alt="화산송이 바하 모공 클렌징폼" />
+                        <img src="images/34513_l1_S_320.jpg" class="over" alt="" />
+                      </a>
+                    </div>
+                    <div class="pdtCont">
+                      <span class="pdname">화산송이 바하 모공 클렌징폼</span>
+                      <p class="price">
+                        <strong class="unit">6,500</strong>
+                        <strong class="cost">13,000</strong>
+                        <strong class="stock">~50%</strong>
+                      </p>
+                      <div class="starWrap">
+                        <em class="starM"></em>
+                        <span class="starNum">4.8 ( 4,078 )</span>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <li class="shopch__list">
+                  <div class="pdtList">
+                    <div class="pdtOver">
+                      <a href="javascript:void(0)" class="pdtImg">
+                        <img src="images/34511_l_S_320.jpg" class="basic" alt="그린티 아미노 수분 클렌징 폼" />
+                        <img src="images/34511_l1_S_320.jpg" class="over" alt="" />
+                      </a>
+                    </div>
+                    <div class="pdtCont">
+                      <span class="pdname">그린티 아미노 수분 클렌징 폼</span>
+                      <p class="price">
+                        <strong class="unit">6,500</strong>
+                        <strong class="cost">13,000</strong>
+                        <strong class="stock">~50%</strong>
+                      </p>
+                      <div class="starWrap">
+                        <em class="starM"></em>
+                        <span class="starNum">4.8 ( 4,391 )</span>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <li class="shopch__list">
+                  <div class="pdtList">
+                    <div class="pdtOver">
+                      <a href="javascript:void(0)" class="pdtImg">
+                        <img src="images/33957_l_S_320.jpg" class="basic" alt="콜라겐 펩타이드 탄력 앰플 크림" />
+                        <img src="images/33957_l1_S_320.jpg" class="over" alt="" />
+                      </a>
+                    </div>
+                    <div class="pdtCont">
+                      <span class="pdname">콜라겐 펩타이드 탄력 앰플 크림</span>
+                      <p class="price">
+                        <strong class="unit">25,350</strong>
+                        <strong class="cost">39,000</strong>
+                        <strong class="stock">35%</strong>
+                      </p>
+                      <div class="starWrap">
+                        <em class="starM"></em>
+                        <span class="starNum">4.9 ( 12,922 )</span>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <li class="shopch__list">
+                  <div class="pdtList">
+                    <div class="pdtOver">
+                      <a href="javascript:void(0)" class="pdtImg">
+                        <img src="images/32082_l_S_320.jpg" class="basic" alt="그린 액티브 세라마이드 장벽 크림" />
+                        <img src="images/32082_l1_S_320.jpg" class="over" alt="" />
+                      </a>
+                    </div>
+                    <div class="pdtCont">
+                      <span class="pdname">그린 액티브 세라마이드 장벽 크림</span>
+                      <p class="price">
+                        <strong class="unit">19,500</strong>
+                        <strong class="cost">30,000</strong>
+                        <strong class="stock">35%</strong>
+                      </p>
+                      <div class="starWrap">
+                        <em class="starM"></em>
+                        <span class="starNum">4.8 ( 4,344 )</span>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+              </div>
+              <div>
+                <li class="shopch__list">
+                  <div class="pdtList">
+                    <div class="pdtOver">
+                      <a href="javascript:void(0)" class="pdtImg">
+                        <img src="images/25636_l_S_320.jpg" class="basic" alt="브라이트닝 포어 세럼" />
+                        <img src="images/25636_l1_S_320.jpg" class="over" alt="" />
+                      </a>
+                    </div>
+                    <div class="pdtCont">
+                      <span class="pdname">브라이트닝 포어 세럼</span>
+                      <p class="price">
+                        <strong class="unit">24,500</strong>
+                        <strong class="cost">35,000</strong>
+                        <strong class="stock">30%</strong>
+                      </p>
+                      <div class="starWrap">
+                        <em class="starM"></em>
+                        <span class="starNum">4.8 ( 12,264 )</span>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <li class="shopch__list">
+                  <div class="pdtList">
+                    <div class="pdtOver">
+                      <a href="javascript:void(0)" class="pdtImg">
+                        <img src="images/25796_l_S_320.jpg" class="basic" alt="브라이트닝 포어 스킨" />
+                        <img src="images/25796_l1_S_320.jpg" class="over" alt="" />
+                      </a>
+                    </div>
+                    <div class="pdtCont">
+                      <span class="pdname">브라이트닝 포어 스킨</span>
+                      <p class="price">
+                        <strong class="unit">17,500</strong>
+                        <strong class="cost">25,000</strong>
+                        <strong class="stock">30%</strong>
+                      </p>
+                      <div class="starWrap">
+                        <em class="starM"></em>
+                        <span class="starNum">4.7 ( 555 )</span>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <li class="shopch__list">
+                  <div class="pdtList">
+                    <div class="pdtOver">
+                      <a href="javascript:void(0)" class="pdtImg">
+                        <img src="images/32296_l_S_320.jpg" class="basic" alt="제주 왕벚꽃 스킨 핏 톤업 크림" />
+                        <img src="images/32296_l1_S_320.jpg" class="over" alt="" />
+                      </a>
+                    </div>
+                    <div class="pdtCont">
+                      <span class="pdname">제주 왕벚꽃 스킨 핏 톤업 크림</span>
+                      <p class="price">
+                        <strong class="unit">18,750</strong>
+                        <strong class="cost">25,000</strong>
+                        <strong class="stock">25%</strong>
+                      </p>
+                      <div class="starWrap">
+                        <em class="starM"></em>
+                        <span class="starNum">4.6 ( 542 )</span>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <li class="shopch__list">
+                  <div class="pdtList">
+                    <div class="pdtOver">
+                      <a href="javascript:void(0)" class="pdtImg">
+                        <img src="images/34516_l_S_320.jpg" class="basic" alt="노세범 파우더 쿠션 리필" />
+                        <img src="images/34516_l1_S_320.jpg" class="over" alt="" />
+                      </a>
+                    </div>
+                    <div class="pdtCont">
+                      <span class="pdname">노세범 파우더 쿠션 리필</span>
+                      <p class="price">
+                        <strong class="unit">13,500</strong>
+                        <strong class="cost">18,000</strong>
+                        <strong class="stock">25%</strong>
+                      </p>
+                      <div class="starWrap">
+                        <em class="starM"></em>
+                        <span class="starNum">4.7 ( 4,948 )</span>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+              </div>
+            </ul>
+            <div class="shopch-control">
+              <div role="button" class="shopch-control__prev"></div>
+              <div role="button" class="shopch-control__next"></div>
+            </div>
+          </div>
+        </section>
+
+        <!-- SECTION-이 상품 관심있지 않으세요? -->
+        <section class="shopforu">
+          <div class="title">
+            <h4>이 상품 관심있지 않으세요?</h4>
+            <a href="javascript:void(0)" class="link">FOR U 바로가기</a>
+          </div>
+          <div class="shopforu-contents">
+            <div class="shopforu-list">
+              <ul>
+                <li>
+                  <div class="pdtList">
+                    <span class="pdtOver">
+                      <a href="javascript:void(0)" class="pdtImg">
+                        <img src="images/20856_l_S_450.jpg" class="basic" alt="제주 왕벚꽃 스킨" />
+                        <img src="images/20856_l1_S_450.jpg" class="over" alt="" />
+                      </a>
+                    </span>
+                    <div class="pdtCont">
+                      <span class="pdname">제주 왕벚꽃 스킨</span>
+                      <p class="price">
+                        <strong class="unit">12,000</strong>
+                        <strong class="cost">16,000</strong>
+                        <strong class="stock">25%</strong>
+                      </p>
+                    </div>
+                  </div>
+                </li>
+                <li>
+                  <div class="pdtList">
+                    <span class="pdtOver">
+                      <a href="javascript:void(0)" class="pdtImg">
+                        <img src="images/32296_l_S_450.jpg" class="basic" alt="제주 왕벚꽃 스킨 핏 톤업 크림" />
+                        <img src="images/32296_l1_S_450.jpg" class="over" alt="" />
+                      </a>
+                    </span>
+                    <div class="pdtCont">
+                      <span class="pdname">제주 왕벚꽃 스킨 핏 톤업 크림</span>
+                      <p class="price">
+                        <strong class="unit">18,750</strong>
+                        <strong class="cost">25,000</strong>
+                        <strong class="stock">25%</strong>
+                      </p>
+                    </div>
+                  </div>
+                </li>
+                <li>
+                  <div class="pdtList">
+                    <span class="pdtOver">
+                      <a href="javascript:void(0)" class="pdtImg">
+                        <img src="images/34498_l_S_450.jpg" class="basic" alt="블랙티 유스 인핸싱 트리트먼트 에센스 [소용량]" />
+                        <img src="images/34498_l1_S_450.jpg" class="over" alt="" />
+                      </a>
+                    </span>
+                    <div class="pdtCont">
+                      <span class="pdname">블랙티 유스 인핸싱 트리트먼트 에센스 [소용량]</span>
+                      <p class="price">
+                        <strong class="unit">20,250</strong>
+                        <strong class="cost">27,000</strong>
+                        <strong class="stock">25%</strong>
+                      </p>
+                    </div>
+                  </div>
+                </li>
+                <li>
+                  <div class="pdtList">
+                    <span class="pdtOver">
+                      <a href="javascript:void(0)" class="pdtImg">
+                        <img src="images/34497_p_S_450.jpg" class="basic" alt="블랙티 유스 인핸싱 앰플 [대용량]" />
+                        <img src="images/34497_p1_S_450.jpg" class="over" alt="" />
+                      </a>
+                    </span>
+                    <div class="pdtCont">
+                      <span class="pdname">블랙티 유스 인핸싱 앰플 [대용량]</span>
+                      <p class="price">
+                        <strong class="unit">18,750</strong>
+                        <strong class="cost">25,000</strong>
+                        <strong class="stock">25%</strong>
+                      </p>
+                    </div>
+                  </div>
+                </li>
+                <li>
+                  <div class="pdtList">
+                    <span class="pdtOver">
+                      <a href="javascript:void(0)" class="pdtImg">
+                        <img src="images/34500_l_S_450.jpg" class="basic" alt="블랙티 유스 인핸싱 스킨" />
+                        <img src="images/34500_l1_S_450.jpg" class="over" alt="블랙티 유스 인핸싱 스킨-호버" />
+                      </a>
+                    </span>
+                    <div class="pdtCont">
+                      <span class="pdname">블랙티 유스 인핸싱 스킨</span>
+                      <p class="price">
+                        <strong class="unit">18,750</strong>
+                        <strong class="cost">25,000</strong>
+                        <strong class="stock">25%</strong>
+                      </p>
+                    </div>
+                  </div>
+                </li>
+              </ul>
+              <div class="shopforu-control">
+                <div role="button" class="shopforu-button__prev"></div>
+                <div role="button" class="shopforu-button__next"></div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <!-- SECTION-고객님에게 딱이에요! -->
+        <section class="shopClient">
+          <div class="topBx">
+            <div class="title">
+              <h4>for U</h4>
+              <a href="javascript:void(0)" class="link">고객님에게 딱이에요!</a>
+            </div>
+            <div class="fou-option">
+              <button type="button" class="option">건성</button>
+              <p class="p01">피부와</p>
+              <button type="button" class="option">모공 / 주름 / 탄력</button>
+              <p class="p02">고민에 추천드려요</p>
+            </div>
+          </div>
+          <div class="pdtList">
+            <ul>
+              <li>
+                <span class="pdtOver">
+                  <a href="javascript:void(0)" class="pdtImg">
+                    <span class="stikerWrap">
+                      <p class="stikderType2">사은품</p>
+                    </span>
+                    <img src="images/34116_p_S_450.jpg" class="basic" alt="그린티 씨드 히알루론산 세럼 80ml" />
+                    <img src="images/34116_p1_S_450.jpg" class="over" alt="그린티 씨드 히알루론산 세럼 80mL-호버" />
+                  </a>
+                </span>
+                <a href="javascript:void(0)" class="pdtCont">
+                  <span class="name">그린티 씨드 히알루론산 세럼 80mL</span>
+                  <div class="tagWrap">
+                    <span class="tag2">#속건조전용세럼</span>
+                    <span class="tag2">#순간흡수텍스처</span>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <span class="pdtOver">
+                  <a href="javascript:void(0)" class="pdtImg">
+                    <span class="stikerWrap"></span>
+                    <img src="images/34616_l_S_450.jpg" class="basic" alt="블랙티 유스 인핸싱 오일 30mL" />
+                    <img src="images/34616_l1_S_450.png" class="over" alt="블랙티 유스 인핸싱 오일 30mL-호버" />
+                  </a>
+                </span>
+                <a href="javascript:void(0)" class="pdtCont">
+                  <span class="name">블랙티 유스 인핸싱 오일 30mL</span>
+                  <div class="tagWrap">
+                    <span class="tag2">안티에어징오일</span>
+                    <span class="tag2">비건오일</span>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <span class="pdtOver">
+                  <a href="javascript:void(0)" class="pdtImg">
+                    <span class="stikerWrap"></span>
+                    <img src="images/24078_l_S_450.jpg" class="basic" alt="더마 그린티 프로바이오틱스 크림 50mL" />
+                    <img src="images/24078_l1_S_450.jpg" class="over" alt="" />
+                  </a>
+                </span>
+                <a href="javascript:void(0)" class="pdtCont">
+                  <span class="name">더마 그린티 프로바이오틱스 크림 50mL</span>
+                  <div class="tagWrap">
+                    <span class="tag2">#바르는유산균</span>
+                    <span class="tag2">#녹차세라마이드</span>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <span class="pdtOver">
+                  <a href="javascript:void(0)" class="pdtImg">
+                    <span class="stikerWrap"></span>
+                    <img src="images/33957_l_S_450.jpg" class="basic" alt="콜라겐 펩타이드 탄력 앰플 크림 50mL" />
+                    <img src="images/33957_l1_S_450.jpg" class="over" alt="" />
+                  </a>
+                </span>
+                <a href="javascript:void(0)" class="pdtCont">
+                  <span class="name">콜라겐 펩타이드 탄력 앰플 크림 50mL</span>
+                  <div class="tagWrap">
+                    <span class="tag2">#모공</span>
+                    <span class="tag2">#콜라겐크림</span>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <span class="pdtOver">
+                  <a href="javascript:void(0)" class="pdtImg">
+                    <span class="stikerWrap"></span>
+                    <img src="images/34511_l_S_450.jpg" class="basic" alt="그린티 아미노 수분 클렌징 폼 150g" />
+                    <img src="images/34511_l1_S_450.jpg" class="over" alt="" />
+                  </a>
+                </span>
+                <a href="javascript:void(0)" class="pdtCont">
+                  <span class="name">그린티 아미노 수분 클렌징 폼 150g</span>
+                  <div class="tagWrap">
+                    <span class="tag2">#저자극클렌징</span>
+                    <span class="tag2">#그린티</span>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <span class="pdtOver">
+                  <a href="javascript:void(0)" class="pdtImg">
+                    <span class="stikerWrap"></span>
+                    <img src="images/34510_l_S_450.jpg" class="basic" alt="그린티 씨드 히알루론산 크림 50mL" />
+                    <img src="images/34510_l1_S_450.jpg" class="over" alt="" />
+                  </a>
+                </span>
+                <a href="javascript:void(0)" class="pdtCont">
+                  <span class="name">그린티 씨드 히알루론산 크림 50mL</span>
+                  <div class="tagWrap">
+                    <span class="tag2">#저자극</span>
+                    <span class="tag2">#그린티</span>
+                  </div>
+                </a>
+              </li>
+            </ul>
+          </div>
+          <div class="more">
+            <button type="button" class="btnRefesh">
+              새로운 추천을 받고 싶어요
+              <span class="ttal">
+                1
+                <span> / 3</span>
+              </span>
+            </button>
+          </div>
+        </section>
+
+        <!-- SECTION-지금 제일 잘나가요 -->
+        <section class="shopRank">
+          <div class="title">
+            <h4>지금 제일 잘나가요</h4>
+          </div>
+          <div class="tabWrap">
+            <ul class="rankingTab">
+              <li class="active">
+                <a href="javascript:void(0)">실시간 판매 랭킹</a>
+              </li>
+              <li>
+                <a href="javascript:void(0)">실시간 조회 랭킹</a>
+              </li>
+            </ul>
+            <a href="javascript:void(0)" class="link">베스트 더보기</a>
+          </div>
+          <div class="shopRankList">
+            <div class="shopRank-contents">
+              <ul>
+                <li>
+                  <div class="pdtList">
+                    <span class="pdtOver">
+                      <a href="javascript:void(0)" class="pdtImg">
+                        <div class="rankNum">
+                          <strong class="rankNumType_2">09</strong>
+                        </div>
+                        <img src="images/34510_l_S_320.jpg" class="basic" alt="그린티 씨드 히알루론산 크림">
+                        <img src="images/34510_l1_S_320.jpg" class="over" alt="">
+                      </a>
+                    </span>
+                    <a href="javascript:void(0)" class="pdtCont">
+                      <span class="pdname">그린티 씨드 히알루론산 크림</span>
+                      <p class="price">
+                        <strong class="unit">21,060 </strong>
+                        <span class="cost">27,000</span>
+                        <span class="stock">22%</span>
+                      </p>
+                    </a>
+                  </div>
+                </li>
+                <li>
+                  <div class="pdtList">
+                    <span class="pdtOver">
+                      <a href="javascript:void(0)" class="pdtImg">
+                        <div class="rankNum">
+                          <strong class="rankNumType_2">10</strong>
+                        </div>
+                        <img src="images/29057_l_S_320.jpg" class="basic" alt="포레스트 포맨 프리미엄 세트 2종">
+                        <img src="images/29057_l1_S_320.jpg" class="over" alt="">
+                      </a>
+                    </span>
+                    <a href="javascript:void(0)" class="pdtCont">
+                      <span class="pdname">포레스트 포맨 프리미엄 세트 2종</span>
+                      <p class="price">
+                        <strong class="unit">55,000 </strong>
+                      </p>
+                    </a>
+                  </div>
+                </li>
+                <li>
+                  <div class="pdtList">
+                    <span class="pdtOver">
+                      <a href="javascript:void(0)" class="pdtImg">
+                        <div class="rankNum">
+                          <strong class="rankNumType_1">01</strong>
+                        </div>
+                        <img src="images/34511_l_S_320.jpg" class="basic" alt="그린티 아미노 수분 클렌징 폼">
+                        <img src="images/34511_l1_S_320.jpg" class="over" alt="">
+                      </a>
+                    </span>
+                    <a href="javascript:void(0)" class="pdtCont">
+                      <span class="pdname">그린티 아미노 수분 클렌징 폼</span>
+                      <p class="price">
+                        <strong class="unit">6,500~ </strong>
+                        <span class="cost">13,000</span>
+                        <span class="stock">~50%</span>
+                      </p>
+                    </a>
+                  </div>
+                </li>
+                <li>
+                  <div class="pdtList">
+                    <span class="pdtOver">
+                      <a href="javascript:void(0)" class="pdtImg">
+                        <div class="rankNum">
+                          <strong class="rankNumType_1">02</strong>
+                        </div>
+                        <img src="images/34513_l_S_320.jpg" class="basic" alt="화산송이 바하 모공 클렌징폼">
+                        <img src="images/34513_l1_S_320.jpg" class="over" alt="">
+                      </a>
+                    </span>
+                    <a href="javascript:void(0)" class="pdtCont">
+                      <span class="pdname">화산송이 바하 모공 클렌징폼</span>
+                      <p class="price">
+                        <strong class="unit">64,800 </strong>
+                        <span class="cost">90,000</span>
+                        <span class="stock">28%</span>
+                      </p>
+                    </a>
+                  </div>
+                </li>
+                <li>
+                  <div class="pdtList">
+                    <span class="pdtOver">
+                      <a href="javascript:void(0)" class="pdtImg">
+                        <div class="rankNum">
+                          <strong class="rankNumType_1">03</strong>
+                        </div>
+                        <img src="images/34536_p_S_320.jpg" class="basic" alt="그린티 씨드 히알루론산 세럼 80mL + 그린티 씨드 히알루론산 크림 50mL">
+                        <img src="images/34536_p_S_320.jpg" class="over" alt="">
+                      </a>
+                    </span>
+                    <a href="javascript:void(0)" class="pdtCont">
+                      <span class="pdname">그린티 씨드 히알루론산 세럼 80mL + 그린티 씨드 히알루론산 크림 50mL</span>
+                      <p class="price">
+                        <strong class="unit">43,500 </strong>
+                        <span class="cost">58,000</span>
+                        <span class="stock">25%</span>
+                      </p>
+                    </a>
+                  </div>
+                </li>
+                <li>
+                  <div class="pdtList">
+                    <span class="pdtOver">
+                      <a href="javascript:void(0)" class="pdtImg">
+                        <div class="rankNum">
+                          <strong class="rankNumType_2">04</strong>
+                        </div>
+                        <img src="images/34497_p_S_320.jpg" class="basic" alt="블랙티 유스 인핸싱 앰플 [대용량]">
+                        <img src="images/34497_p1_S_320.jpg" class="over" alt="">
+                      </a>
+                    </span>
+                    <a href="javascript:void(0)" class="pdtCont">
+                      <span class="pdname">블랙티 유스 인핸싱 앰플 [대용량]</span>
+                      <p class="price">
+                        <strong class="unit">42,000 </strong>
+                        <span class="cost">56,000</span>
+                        <span class="stock">25%</span>
+                      </p>
+                    </a>
+                  </div>
+                </li>
+              </ul>
+              <div class="shopRank-control">
+                <div class="Rank-button-prev"></div>
+                <div class="Rank-button-next"></div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <!-- SECTION-주목해야 할 신제품 추천 -->
+        <section class="newPd">
+          <div class="title">
+            <h4>주목해야 할 신제품 추천</h4>
+            <a href="javascript:void(0)" class="link">신제품 바로가기</a>
+          </div>
+          <div class="newPd--contents">
+            <ul class="newPd__detail">
+              <li class="newPd__list">
+                <div class="pdtList">
+                  <a href="javascript:void(0)" class="pdtImg">
+                    <span class="tag-card">
+                      <span class="cardSt_1">NEW</span>
+                    </span>
+                    <img src="images/51_2.jpg" alt="#블랙티유스인핸싱오일" />
+                  </a>
+                  <a href="javascript:void(0)" class="pdtCont">
+                    <div class="newPdname">숙면한 듯 건강한 광채 피부</div>
+                    <div class="newPdname2">피부 컨디션 케어가 필요한 모든 순간 #블랙티유스인행싱오일</div>
+                  </a>
+                </div>
+              </li>
+              <li class="newPd__list">
+                <div class="pdtList">
+                  <a href="javascript:void(0)" class="pdtImg">
+                    <span class="tag-card">
+                      <span class="cardSt_1">NEW</span>
+                    </span>
+                    <img src="images/47_2.jpg" alt="#그린티씨드히알루론산세럼" />
+                  </a>
+                  <a href="javascript:void(0)" class="pdtCont">
+                    <div class="newPdname">속수분 전용 세럼</div>
+                    <div class="newPdname2">강력한 속건조 개선력으로 업그레이드 된 #그린티씨드히알루론산세럼</div>
+                  </a>
+                </div>
+              </li>
+              <li class="newPd__list">
+                <div class="pdtList">
+                  <a href="javascript:void(0)" class="pdtImg">
+                    <span class="tag-card">
+                      <span class="cardSt_1">NEW</span>
+                    </span>
+                    <img src="images/48_2.jpg" alt="#레티놀시카흔적앰플" />
+                  </a>
+                  <a href="javascript:void(0)" class="pdtCont">
+                    <div class="newPdname">레티놀 앰플로 깐달걀 피부!</div>
+                    <div class="newPdname2">트러블, 잡티 흔적, 커진 모공 고민엔 #레티놀시카흔적앰플</div>
+                  </a>
+                </div>
+              </li>
+              <li class="newPd__list">
+                <div class="pdtList">
+                  <a href="javascript:void(0)" class="pdtImg">
+                    <span class="tag-card">
+                      <span class="cardSt_1">NEW</span>
+                    </span>
+                    <img src="images/50_2.jpg" alt="#노세범 미네랄 파우더" />
+                  </a>
+                  <a href="javascript:void(0)" class="pdtCont">
+                    <div class="newPdname">5천만의 국민세범</div>
+                    <div class="newPdname2">기름종이파우더 하나로 얼굴부터 바디까지 유분기 단속! #노세범 미네랄 파우더</div>
+                  </a>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </section>
+
+        <!-- SECTION-고객님들의 솔직한 리뷰 -->
+        <section class="clientReview">
+          <div class="title">
+            <h4>고객님들의 솔직한 리뷰</h4>
+          </div>
+          <div class="Reviewcont">
+            <div class="Reviewcont__cont">
+              <ul class="Condetail">
+                <li>
+                  <div class="pdtList">
+                    <a href="javascript:void(0)" class="pdtImg">
+                      <img src="images/34517_l1_S_450.jpg" alt="노세범 미네랄 파우더" />
+                    </a>
+                    <a href="javascript:void(0)" class="pdtCont">
+                      <div class="name">노세범 미네랄 파우더</div>
+                      <div class="name2">저한텐 좀 건조한데 보송하게 유분은 잘잡네요</div>
+                      <div class="starWrap">
+                        <em class="starM"></em>
+                        <span class="starNum">4.8 (16,836)</span>
+                      </div>
+                    </a>
+                  </div>
+                </li>
+                <li>
+                  <div class="pdtList">
+                    <a href="javascript:void(0)" class="pdtImg">
+                      <img src="images/34497_p1_S_450.jpg" alt="노세범 미네랄 파우더" />
+                    </a>
+                    <a href="javascript:void(0)" class="pdtCont">
+                      <div class="name">블랙티 유스 인핸싱 앰플 [대용량]</div>
+                      <div class="name2">블랙티 앰플은 거의 출시 시점부터 꾸준히 사용하고 있어요. 건성이 심했는데 블랙티라인 꾸준히 쓰고 많이 좋아졌어요</div>
+                      <div class="starWrap">
+                        <em class="starM"></em>
+                        <span class="starNum">4.8 (16,836)</span>
+                      </div>
+                    </a>
+                  </div>
+                </li>
+                <li>
+                  <div class="pdtList">
+                    <a href="javascript:void(0)" class="pdtImg">
+                      <img src="images/34521_l1_S_450.jpg" alt="노세범 미네랄 파우더" />
+                    </a>
+                    <a href="javascript:void(0)" class="pdtCont">
+                      <div class="name">노세범 미네랄 파우더</div>
+                      <div class="name2">저한텐 좀 건조한데 보송하게 유분은 잘잡네요</div>
+                      <div class="starWrap">
+                        <em class="starM"></em>
+                        <span class="starNum">4.8 (16,836)</span>
+                      </div>
+                    </a>
+                  </div>
+                </li>
+              </ul>
+            </div>
+            <div class="clientReview-control">
+              <div class="Review-button-prev"></div>
+              <div class="Review-button-next"></div>
+            </div>
+          </div>
+        </section>
+
+        <!-- SECTION-이니스프리 멤버십 혜택 안내 -->
+        <section class="MemberShip">
+          <h2 class="MemberShip--subTitle">이니스프리 멤버십 혜택 안내</h2>
+          <div class="MemberShip--contWrap">
+            <p class="subTxt">이니스프리 멤버십 회원이 되시면 이니스프리에서 제공하는 다양한 혜택을 받으실 수 있습니다.</p>
+            <ul class="list">
+              <li>
+                <span class="icon">
+                  <img src="images/icon_mb1.png" alt="멤버십데이 혜택">
+                </span>
+                <strong class="tit">멤버십데이 혜택</strong>
+                <span class="txt">등급별 할인혜택</span>
+              </li>
+              <li>
+                <span class="icon">
+                  <img src="images/icon_mb7.png" alt="시크릿쿠폰">
+                </span>
+                <strong class="tit">시크릿쿠폰</strong>
+                <span class="txt">월1회 할인쿠폰제공</span>
+              </li>
+              <li>
+                <span class="icon">
+                  <img src="images/icon_mb3.png" alt="구매 적립">
+                </span>
+                <strong class="tit">구매 적립</strong>
+                <span class="txt">구매 금액 1% 적립</span>
+              </li>
+              <li>
+                <span class="icon">
+                  <img src="images/icon_mb4.png" alt="생일 혜택">
+                </span>
+                <strong class="tit">생일 혜택</strong>
+                <span class="txt">40% 할인 쿠폰 지급</span>
+              </li>
+              <li>
+                <span class="icon">
+                  <img src="images/icon_mb8.png" alt="그린티클럽키트">
+                </span>
+                <strong class="tit">그린티클럽키트</strong>
+                <span class="txt">연 2회 신청</span>
+              </li>
+            </ul>
+            <a href="javascript:void(0)" class="pdtMore">혜택 더보기</a>
+          </div>
+        </section>
+
+      </div>
+    </section>
+
+    <!-- HEADER-FIXED (Show, Hide) -->
+    <div class="fix--head">
+      <div class="inner">
+        <button id="nav-icon" title="전체메뉴 열기">
+          <span></span>
+          <span></span>
+          <span></span>
+        </button>
+        <a href="javascript:void(0)" class="logo">
+          <img src="images/logo_white.png" alt="innisfree">
+        </a>
+        <div class="right">
+          <fieldset class="g_search">
+            <form name="topSearchFrm2" id="topSearchFrm2" action="">
+              <input type="text" class="inputTxt" placeholder="없는게 없다! 카테고리 대전 ~35%">
+              <button type="button" class="btnSearch"></button>
+            </form>
+          </fieldset>
+          <ul class="list_myutil">
+            <li class="link_mypage">
+              <a href="javascript:void(0)" class="btnMypage2">마이페이지</a>
+            </li>
+            <li class="link_cart">
+              <a href="javascript:void(0)" class="btnCart">
+                장바구니
+                <em id="cartCntTxt2">0</em>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+
+    <!-- aside -->
+    <asdie class="floatingMenu">
+      <div class="innerWrap">
+        <nav class="pdtList hideList">
+          <h2 class="pdtHistoryTit">최근 봄 제품</h2>
+          <ul class="list">
+            <li class="nonList">
+              최근 본 제품이
+              <br>
+              없습니다.
+            </li>
+          </ul>
+        </nav>
+        <a href="javascript:void(0)"><button type="button" class="btnDocTop"></button></a>
+      </div>
+    </asdie>
+
+    <!-- FOOTER -->
+    <footer>
+      <div class="menuWrap">
+        <div class="menuWrpa__menu">
+          <nav role="navigation" aria-label="Customer-service">
+            <a href="javascript:void(0)">서비스 이용약관</a>
+            <a href="javascript:void(0)">
+              <strong>개인정보처리방침</strong>
+            </a>
+            <a href="javascript:void(0)">영상정보처리기기 운영/관리 방침</a>
+            <a href="javascript:void(0)">공지사항</a>
+            <a href="javascript:void(0)">임직원서비스</a>
+          </nav>
+          <div class="snsIcon">
+            <span class="btn btn-Youtube">
+              <a href="javascript:void(0)"></a>
+            </span>
+            <span class="btn btn-Instargram">
+              <a href="javascript:void(0)"></a>
+            </span>
+            <span class="btn btn-Facebook">
+              <a href="javascript:void(0)"></a>
+            </span>
+            <span class="btn btn-Twitter">
+              <a href="javascript:void(0)"></a>
+            </span>
+            <span class="btn btn-App">
+              <a href="javascript:void(0)"></a>
+            </span>
+          </div>
+        </div>
+      </div>
+      <div class="menuWrap__ftinfo">
+        <div class="info">
+          <p class="inner">
+            <span>(주)이니스프리 서울특별시 용산구 한강대로 100(한강로2가) 7층 이니스프리</span>
+            <span class="non">대표이사 최민정</span>
+            <br>
+            <span>사업자 등록번호 106-86-68127</span>
+            <span>통신판매신고번호 2018-서울용산-0014</span>
+            <span>제품 문의 : 080-380-0114</span>
+            <span>제품 문의 : 080-380-0114</span>
+            <span class="non">FAX 02-6040-7108</span>
+            <br>
+            <span>
+              이메일 주소
+              <a href="javascript:void(0)">innisfree@innisfree.com</a>
+            </span>
+            <span>
+              비즈니스제휴/입점문의 
+              <a href="javascript:void(0)">partner.biz@innisfree.com</a>
+            </span>
+            <br>
+            <span>
+              <a href="javascript:void(0)">이메일 주소 무단 수집 거부</a>
+            </span>
+            <span>개인정보 보호책임자 정구화</span>
+            <span>호스팅 서비스 제공자 ㈜이니스프리</span>
+            <br>
+          </p>
+          <div class="Paytoss">
+            <strong class="tit">㈜토스페이먼츠의 에스크로 서비스 가입</strong>
+            <em>저희 쇼핑몰은 고객님의 안전한 거래를 위해 무통장입금 거래에 대해 구매안전서비스를 적용하고 있습니다.</em>
+            <p>
+              <button type="button">토스페이먼츠 구매안전 서비스 가입확인</button>
+            </p>
+          </div>
+          <p class="copyright">Copyright © 2023 Innisfree. All Rights Reserved.</p>
+          <p class="awards">
+            스마트앱어워드 2022
+            <br>
+            브랜드부문 통합대상
+          </p>
+        </div>
+        <div class="info-2">
+          <dl>
+            <dt>고객 서비스 센터 이용안내</dt>
+            <dd>
+              <strong>080-380-0114</strong>
+              (수신자 요금 부담)
+            </dd>
+            <dd>
+              운영시간 AM 09:00 ~ PM 18:00 (주말 및 공휴일 휴무)
+              <br>
+              점심시간 PM 12:00 ~ PM 13:00
+            </dd>
+            <dd>
+              <a href="javascript:void(0)" class="btn">1:1상담작성 </a>
+            </dd>
+          </dl>
+        </div>
+      </div>
+    </footer>
+
+  </div>
+
+</body>
+
+</html>
diff --git a/js/script.js b/js/script.js
new file mode 100644
index 00000000..eba77607
--- /dev/null
+++ b/js/script.js
@@ -0,0 +1,41 @@
+// Swiper를 활용한 배너 슬라이드
+new Swiper('.slideWrap .swiper-container', {
+  autoplay: {
+    delay: 5000
+  },
+  loop: true,
+  slidesPerView: 1,
+  centeredSlides: true,
+  navigation: {
+    prevEl: '.swiper-button-prev',
+    nextEl: '.swiper-button-next',
+  },
+});
+
+
+// ASIDE Part - 버튼 클릭 시 페이지 상단으로 이동
+const $topBtn = document.querySelector(".btnDocTop");
+
+$topBtn.onclick = () => {
+  window.scrollTo({
+    top: 0,
+    behavior: "smooth"
+  });
+}
+
+
+// HEADER-FIXED - 스크롤 시 Show & Hide
+$(document).ready(function () {
+  var navHeight = $("header").height();
+  $(".fix--head").hide();
+  $(window).scroll(function () {
+    var rollIt = $(this).scrollTop() >= navHeight;
+    if (rollIt) {
+      $(".fix--head").show().css({
+        "position": "fixed",
+      });
+    } else {
+      $(".fix--head").hide();
+    }
+  });
+});
\ No newline at end of file