diff --git a/css/common.css b/css/common.css
new file mode 100644
index 0000000..f910a99
--- /dev/null
+++ b/css/common.css
@@ -0,0 +1,342 @@
+/* COMMON */
+body{
+    color:#333;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 1.4;
+    font-family: "Nanum Gothic", sans-serif; /*폰트는 상속이 되는 속성(유료폰트 사용하지 않도록 주의)*/
+}
+img{
+    /* 이미지요소를 글자처럼 취급하지 않고 레이아웃으로 취급하기 위함 */
+    display: block;
+}
+a{
+    text-decoration: none;
+}
+.inner{
+    width: 1100px;
+    margin: 0 auto;
+    position: relative;
+}
+.btn{
+    width: 130px;
+    padding: 10px;
+    border: 2px solid #333;
+    border-radius: 4px;
+    color: #333;
+    font-size: 16px;
+    font-weight: 700;
+    text-align: center;
+    cursor: pointer;
+    box-sizing: border-box;
+    display: block;
+    transition: .4s;
+}
+.btn:hover{
+    background-color: #333;
+    color: #fff;
+}
+.btn.btn--reverse{
+    background-color: #333;
+    color: #fff;
+}
+.btn.btn--reverse:hover{
+    background-color: transparent;
+    color: #333;
+}
+.btn.btn--brown{
+    color:#592b18;
+    border-color: #592b18;
+}
+.btn.btn--brown:hover{
+    color: #fff;
+    background-color: #592b18;
+}
+.btn.btn--gold{
+    color: #d9aa8a;
+    border-color: #d9aa8a;
+}
+.btn.btn--gold:hover{
+    color: #fff;
+    background-color: #d9aa8a;
+}
+.btn.btn--white{
+    color: #fff;
+    border-color: #fff;
+}
+.btn.btn--white:hover{
+    color: #333;
+    background-color: #fff;
+}
+.back-to-position{
+    opacity: 0;
+    transition: 1s;
+}
+.back-to-position.to-right{
+    transform: translateX(-150px);
+}
+.back-to-position.to-left{
+    transform: translateX(150px);
+}
+.show .back-to-position{
+    opacity: 1;
+    transform: translateX(0);
+}
+.show .back-to-position.delay-0{
+    transition-delay: 0s;
+}
+.show .back-to-position.delay-1{
+    transition-delay: .3s;
+}
+.show .back-to-position.delay-2{
+    transition-delay: .6s;
+}
+.show .back-to-position.delay-3{
+    transition-delay: .9s;
+}
+
+/* HEADER */
+header{
+    background-color: #f6f5f0;
+    border-bottom: 1px solid #c8c8c8;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 9;
+}
+
+header > .inner{ /*header의 자식요소만 선택*/
+    height: 120px;
+}
+
+header .logo{
+    height: 75px;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left:0;
+    margin: auto;
+}
+
+header .sub-menu{
+    display: flex;
+    position: absolute;
+    top:10px;
+    right:0;
+}
+header .sub-menu ul.menu{
+    display: flex;
+    font-family: Arial, sans-serif;
+}
+header .sub-menu ul.menu li{
+    position: relative;
+}
+header .sub-menu ul.menu li::before{
+    content: "";
+    width: 1px;
+    height:12px;
+    background-color: #e5e5e5;
+    position: absolute; /*block요소로 변환*/
+    top: 0;
+    bottom: 0;
+    margin: auto 0;
+    
+}
+header .sub-menu ul.menu li:first-child::before{
+    display: none;
+}
+header .sub-menu ul.menu li a{
+    display: block;
+    color:#656565;
+    font-size: 12px;
+    padding: 11px 16px;
+}
+header .sub-menu ul.menu li a:hover{
+    color:#000;
+}
+header .sub-menu .search{
+    position: relative;
+    height: 34px;
+}
+header .sub-menu .search input{
+    width: 36px;
+    height: 34px;
+    padding: 4px 10px;
+    border: 1px solid #ccc;
+    box-sizing: border-box;
+    border-radius: 5px;
+    outline: none;
+    background-color: #fff;
+    color: #777;
+    font-size: 12px;
+    transition: width .4s;
+}
+header .sub-menu .search input:focus{
+    width: 190px;
+    border-color: #669900;
+}
+header .sub-menu .search .material-icons{
+    position: absolute;
+    height: 24px; /*Google Icon에서 제공하는 폰트 사이즈*/
+    top: 0;
+    bottom: 0;
+    right:5px;
+    margin: auto;
+    transition: .4s;
+}
+header .sub-menu .search.focused .material-icons{
+    opacity: 0;
+}
+
+header .main-menu{
+    position: absolute;
+    display: flex;
+    right:0;
+    bottom:0;
+    z-index: 1;
+}
+header .main-menu .item{
+    
+}
+header .main-menu .item .item__name{
+    padding: 10px 20px 34px 20px;
+    font-family: Arial, sans-serif;
+    font-size: 13px;
+}
+header .main-menu .item:hover .item__name{
+    background-color: #2c2a29;
+    color: #669900;
+    border-radius: 6px 6px 0 0;
+}
+header .main-menu .item .item__contents{
+    width:100%;
+    position: fixed;
+    left:0;
+    display: none;
+}
+header .main-menu .item:hover .item__contents{
+    display: block;
+}
+header .main-menu .item .item__contents .contents__menu{
+    background-color: #2c2a29;
+}
+header .main-menu .item .item__contents .contents__menu > ul{
+    display: flex;
+    padding: 20px 0;
+}
+header .main-menu .item .item__contents .contents__menu > ul > li{
+    width: 220px;
+}
+header .main-menu .item .item__contents .contents__menu > ul > li h4{
+    padding: 3px 0 12px 0;
+    font-size: 14px;
+    color: #fff;
+}
+header .main-menu .item .item__contents .contents__menu > ul > li ul li{
+    padding: 5px 0;
+    font-size: 12px;
+    color: #999;
+    cursor: pointer;/*마우스를 올리면 커서가 화살표에서 손가락 모양으로 변화*/
+}
+header .main-menu .item .item__contents .contents__menu > ul > li ul li:hover{
+    color: #669900;
+}
+header .main-menu .item .item__contents .contents__texture{
+    font-size: 12px;
+    padding: 26px 0;
+    background-image: url("../images/main_menu_pattern.jpg");
+}
+header .main-menu .item .item__contents .contents__texture h4{
+    color: #999;
+    font-weight: 700;
+}
+header .main-menu .item .item__contents .contents__texture p{
+    color: #669900;
+    margin: 4px 0 14px;
+}
+header .badges{
+    position: absolute;
+    top: 132px;
+    right: 12px;
+}
+header .badges .badge{
+    border-radius: 10px;
+    overflow: hidden;
+    margin-bottom: 12px;
+    box-shadow: 4px 4px 10px rgba(0, 0, 0, .15);
+    cursor: pointer;
+}
+
+/* footer */
+
+footer{
+    background-color: #272727;
+    border-top: 1px solid #333;
+}
+footer .inner{
+    padding: 40px 0 60px 0;
+}
+footer .menu{
+    display: flex;
+    justify-content: center;
+}
+footer .menu li{
+    position: relative;
+}
+footer .menu li::before{
+    content: "";
+    width: 3px;
+    height: 3px;
+    background-color: #555;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: -1px;
+    margin: auto;
+}
+footer .menu li:last-child:before{
+    display: none;
+}
+footer .menu li a{
+    display: block;
+    color: #ccc;
+    font-size: 12px;
+    font-weight: 700;
+    padding: 15px;
+}
+footer .menu li a.green{
+    color: #669900;
+}
+footer .btn-group{
+    margin-top: 20px;
+    display: flex;
+    justify-content: center;
+}
+footer .btn-group .btn{
+    font-size: 12px;
+    margin-right: 10px;
+}
+footer .btn-group .btn:last-child{
+    margin-right: 0;
+}
+footer .info{
+    margin-top: 30px;
+    text-align: center;
+}
+footer .info span{
+    margin-right: 20px;
+    color: #999;
+    font-size: 12px;
+}
+footer .info span:last-child{
+    margin-right: 0;
+}
+footer .copyright{
+    color: #999;
+    font-size: 12px;
+    text-align: center;
+    margin-top: 12px;
+}
+footer .logo{
+    margin: 30px auto 0;
+}
diff --git a/css/main.css b/css/main.css
index 21ef321..efb8bad 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1,272 +1,3 @@
-/* COMMON */
-body{
-    color:#333;
-    font-size: 16px;
-    font-weight: 400;
-    line-height: 1.4;
-    font-family: "Nanum Gothic", sans-serif; /*폰트는 상속이 되는 속성(유료폰트 사용하지 않도록 주의)*/
-}
-img{
-    /* 이미지요소를 글자처럼 취급하지 않고 레이아웃으로 취급하기 위함 */
-    display: block;
-}
-a{
-    text-decoration: none;
-}
-.inner{
-    width: 1100px;
-    margin: 0 auto;
-    position: relative;
-}
-.btn{
-    width: 130px;
-    padding: 10px;
-    border: 2px solid #333;
-    border-radius: 4px;
-    color: #333;
-    font-size: 16px;
-    font-weight: 700;
-    text-align: center;
-    cursor: pointer;
-    box-sizing: border-box;
-    display: block;
-    transition: .4s;
-}
-.btn:hover{
-    background-color: #333;
-    color: #fff;
-}
-.btn.btn--reverse{
-    background-color: #333;
-    color: #fff;
-}
-.btn.btn--reverse:hover{
-    background-color: transparent;
-    color: #333;
-}
-.btn.btn--brown{
-    color:#592b18;
-    border-color: #592b18;
-}
-.btn.btn--brown:hover{
-    color: #fff;
-    background-color: #592b18;
-}
-.btn.btn--gold{
-    color: #d9aa8a;
-    border-color: #d9aa8a;
-}
-.btn.btn--gold:hover{
-    color: #fff;
-    background-color: #d9aa8a;
-}
-.btn.btn--white{
-    color: #fff;
-    border-color: #fff;
-}
-.btn.btn--white:hover{
-    color: #333;
-    background-color: #fff;
-}
-.back-to-position{
-    opacity: 0;
-    transition: 1s;
-}
-.back-to-position.to-right{
-    transform: translateX(-150px);
-}
-.back-to-position.to-left{
-    transform: translateX(150px);
-}
-.show .back-to-position{
-    opacity: 1;
-    transform: translateX(0);
-}
-.show .back-to-position.delay-0{
-    transition-delay: 0s;
-}
-.show .back-to-position.delay-1{
-    transition-delay: .3s;
-}
-.show .back-to-position.delay-2{
-    transition-delay: .6s;
-}
-.show .back-to-position.delay-3{
-    transition-delay: .9s;
-}
-
-/* HEADER */
-header{
-    background-color: #f6f5f0;
-    border-bottom: 1px solid #c8c8c8;
-    position: fixed;
-    top: 0;
-    width: 100%;
-    z-index: 9;
-}
-
-header > .inner{ /*header의 자식요소만 선택*/
-    height: 120px;
-}
-
-header .logo{
-    height: 75px;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left:0;
-    margin: auto;
-}
-
-header .sub-menu{
-    display: flex;
-    position: absolute;
-    top:10px;
-    right:0;
-}
-header .sub-menu ul.menu{
-    display: flex;
-    font-family: Arial, sans-serif;
-}
-header .sub-menu ul.menu li{
-    position: relative;
-}
-header .sub-menu ul.menu li::before{
-    content: "";
-    width: 1px;
-    height:12px;
-    background-color: #e5e5e5;
-    position: absolute; /*block요소로 변환*/
-    top: 0;
-    bottom: 0;
-    margin: auto 0;
-    
-}
-header .sub-menu ul.menu li:first-child::before{
-    display: none;
-}
-header .sub-menu ul.menu li a{
-    display: block;
-    color:#656565;
-    font-size: 12px;
-    padding: 11px 16px;
-}
-header .sub-menu ul.menu li a:hover{
-    color:#000;
-}
-header .sub-menu .search{
-    position: relative;
-    height: 34px;
-}
-header .sub-menu .search input{
-    width: 36px;
-    height: 34px;
-    padding: 4px 10px;
-    border: 1px solid #ccc;
-    box-sizing: border-box;
-    border-radius: 5px;
-    outline: none;
-    background-color: #fff;
-    color: #777;
-    font-size: 12px;
-    transition: width .4s;
-}
-header .sub-menu .search input:focus{
-    width: 190px;
-    border-color: #669900;
-}
-header .sub-menu .search .material-icons{
-    position: absolute;
-    height: 24px; /*Google Icon에서 제공하는 폰트 사이즈*/
-    top: 0;
-    bottom: 0;
-    right:5px;
-    margin: auto;
-    transition: .4s;
-}
-header .sub-menu .search.focused .material-icons{
-    opacity: 0;
-}
-
-header .main-menu{
-    position: absolute;
-    display: flex;
-    right:0;
-    bottom:0;
-    z-index: 1;
-}
-header .main-menu .item{
-    
-}
-header .main-menu .item .item__name{
-    padding: 10px 20px 34px 20px;
-    font-family: Arial, sans-serif;
-    font-size: 13px;
-}
-header .main-menu .item:hover .item__name{
-    background-color: #2c2a29;
-    color: #669900;
-    border-radius: 6px 6px 0 0;
-}
-header .main-menu .item .item__contents{
-    width:100%;
-    position: fixed;
-    left:0;
-    display: none;
-}
-header .main-menu .item:hover .item__contents{
-    display: block;
-}
-header .main-menu .item .item__contents .contents__menu{
-    background-color: #2c2a29;
-}
-header .main-menu .item .item__contents .contents__menu > ul{
-    display: flex;
-    padding: 20px 0;
-}
-header .main-menu .item .item__contents .contents__menu > ul > li{
-    width: 220px;
-}
-header .main-menu .item .item__contents .contents__menu > ul > li h4{
-    padding: 3px 0 12px 0;
-    font-size: 14px;
-    color: #fff;
-}
-header .main-menu .item .item__contents .contents__menu > ul > li ul li{
-    padding: 5px 0;
-    font-size: 12px;
-    color: #999;
-    cursor: pointer;/*마우스를 올리면 커서가 화살표에서 손가락 모양으로 변화*/
-}
-header .main-menu .item .item__contents .contents__menu > ul > li ul li:hover{
-    color: #669900;
-}
-header .main-menu .item .item__contents .contents__texture{
-    font-size: 12px;
-    padding: 26px 0;
-    background-image: url("../images/main_menu_pattern.jpg");
-}
-header .main-menu .item .item__contents .contents__texture h4{
-    color: #999;
-    font-weight: 700;
-}
-header .main-menu .item .item__contents .contents__texture p{
-    color: #669900;
-    margin: 4px 0 14px;
-}
-header .badges{
-    position: absolute;
-    top: 132px;
-    right: 12px;
-}
-header .badges .badge{
-    border-radius: 10px;
-    overflow: hidden;
-    margin-bottom: 12px;
-    box-shadow: 4px 4px 10px rgba(0, 0, 0, .15);
-    cursor: pointer;
-}
-
 /* VISUAL */
 .visual{
     margin-top: 120px; /*header의 높이*/
@@ -796,79 +527,6 @@ header .badges .badge{
     color: #333;
 }
 
-/* footer */
-
-footer{
-    background-color: #272727;
-    border-top: 1px solid #333;
-}
-footer .inner{
-    padding: 40px 0 60px 0;
-}
-footer .menu{
-    display: flex;
-    justify-content: center;
-}
-footer .menu li{
-    position: relative;
-}
-footer .menu li::before{
-    content: "";
-    width: 3px;
-    height: 3px;
-    background-color: #555;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    right: -1px;
-    margin: auto;
-}
-footer .menu li:last-child:before{
-    display: none;
-}
-footer .menu li a{
-    display: block;
-    color: #ccc;
-    font-size: 12px;
-    font-weight: 700;
-    padding: 15px;
-}
-footer .menu li a.green{
-    color: #669900;
-}
-footer .btn-group{
-    margin-top: 20px;
-    display: flex;
-    justify-content: center;
-}
-footer .btn-group .btn{
-    font-size: 12px;
-    margin-right: 10px;
-}
-footer .btn-group .btn:last-child{
-    margin-right: 0;
-}
-footer .info{
-    margin-top: 30px;
-    text-align: center;
-}
-footer .info span{
-    margin-right: 20px;
-    color: #999;
-    font-size: 12px;
-}
-footer .info span:last-child{
-    margin-right: 0;
-}
-footer .copyright{
-    color: #999;
-    font-size: 12px;
-    text-align: center;
-    margin-top: 12px;
-}
-footer .logo{
-    margin: 30px auto 0;
-}
 
 #to-top{
     width: 42px;
diff --git a/index.html b/index.html
index 8521d6b..2e67475 100644
--- a/index.html
+++ b/index.html
@@ -31,6 +31,7 @@
   <!--Google Material Icons-->
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
 
+  <link rel="stylesheet" href="./css/common.css" />
   <link rel="stylesheet" href="./css/main.css" />
 
   <!--GSAP & ScrollToPlugin-->
@@ -45,8 +46,10 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js" integrity="sha512-90vH1Z83AJY9DmlWa8WkjkV79yfS2n2Oxhsi2dZbIv0nC4E6m5AbH8Nh156kkM7JePmqD6tcZsfad1ueoaovww==" crossorigin="anonymous"></script>
 
   <script defer src="./js/youtube.js"></script>
+  <script defer src="./js/common.js"></script>  
   <script defer src="./js/main.js"></script>
-    
+  
+
 </head>
 <!-- favicon.ico파일이 루트경로에 있으면 자동적으로 탭 부분에 아이콘 생성 -->
 <!-- 다른 파일을 제공하고 싶으면 링크 태그 관계 부분에 icon 입력 후 해당 파일을 href 속성에 명시 -->
diff --git a/js/common.js b/js/common.js
new file mode 100644
index 0000000..60e64cd
--- /dev/null
+++ b/js/common.js
@@ -0,0 +1,19 @@
+const searchEl = document.querySelector('.search')
+const searchInputEl = searchEl.querySelector('input')
+
+searchEl.addEventListener('click', function () {
+    searchInputEl.focus()
+});
+
+searchInputEl.addEventListener('focus',function () {
+    searchEl.classList.add('focused');
+    searchInputEl.setAttribute('placeholder','통합검색');
+});
+
+searchInputEl.addEventListener('blur',function(){
+    searchEl.classList.remove('focused');
+    searchInputEl.setAttribute('placeholder','');
+});
+
+const thisYear = document.querySelector('.this-year');
+thisYear.textContent = new Date().getFullYear(); //연도 삽입
diff --git a/js/main.js b/js/main.js
index 8c4d5d6..d7bc116 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,23 +1,6 @@
 
 'use strict'
 
-const searchEl = document.querySelector('.search')
-const searchInputEl = searchEl.querySelector('input')
-
-searchEl.addEventListener('click', function () {
-    searchInputEl.focus()
-});
-
-searchInputEl.addEventListener('focus',function () {
-    searchEl.classList.add('focused');
-    searchInputEl.setAttribute('placeholder','통합검색');
-});
-
-searchInputEl.addEventListener('blur',function(){
-    searchEl.classList.remove('focused');
-    searchInputEl.setAttribute('placeholder','');
-});
-
 const badgeEl = document.querySelector('header .badges')
 const toTopEl = document.querySelector('#to-top')
 
@@ -151,6 +134,4 @@ spyEls.forEach(function(spyEl) {
         .addTo(new ScrollMagic.Controller());
 });
 
-const thisYear = document.querySelector('.this-year');
-thisYear.textContent = new Date().getFullYear(); //연도 삽입
 
diff --git a/signin/index.html b/signin/index.html
index e69de29..eaf6b9f 100644
--- a/signin/index.html
+++ b/signin/index.html
@@ -0,0 +1,416 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Starbucks Coffee Korea</title>
+
+    <meta property="og:type" content="website" />
+    <meta property="og:site_name" content="Starbucks" />
+    <meta property="og:title" content="Starbucks Coffee Korea" />
+    <meta property="og:description" content="스타벅스는 세계에서 가장 큰 다국적 커피 전문점으로, 64개국에서 총 23,187개의 매점을 운영하고 있습니다." />
+    <meta property="og:image" content="../images/starbucks_seo.jpg" />
+    <meta property="og:url" content="https://starbucks.co.kr" />  
+    
+    <!-- 사이트의 원활한 공유를 위해 오픈그래프와 트위터카드 모두 명시해주는 것을 권장 -->
+    <meta property="twitter:card" content="summary" />
+    <meta property="twitter:site" content="Starbucks" />
+    <meta property="twitter:title" content="Starbucks Coffee Korea" />
+    <meta property="twitter:description" content="스타벅스는 세계에서 가장 큰 다국적 커피 전문점으로, 64개국에서 총 23,187개의 매점을 운영하고 있습니다." />
+    <meta property="twitter:image" content="../images/starbucks_seo.jpg" />
+    <meta property="twitter:url" content="https://starbucks.co.kr" />
+
+    <!--파비콘-->
+  <!--<link rel="shortcut icon" href="favicon.ico" />-->
+  <link rel="icon" href="../favicon.png" />
+  <!--브라우저 스타일 초기화-->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css" />
+  <!--Google Fonts - 나눔고딕-->
+  <link rel="preconnect" href="https://fonts.gstatic.com" />
+  <link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700&display=swap" rel="stylesheet" />
+  <!--Google Material Icons-->
+  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+
+  <link rel="stylesheet" href="../css/common.css" />
+
+ 
+  <script defer src="../js/common.js"></script>
+    
+</head>
+<!-- favicon.ico파일이 루트경로에 있으면 자동적으로 탭 부분에 아이콘 생성 -->
+<!-- 다른 파일을 제공하고 싶으면 링크 태그 관계 부분에 icon 입력 후 해당 파일을 href 속성에 명시 -->
+<body>
+
+    <!-- HEADER -->
+    <!-- header 태그의 기능적인 역할은 없고, 헤더 영역임을 명시하기 위함 -->
+    <header>
+
+    <div class="inner">
+        <!-- /는 현재의 메인 페이지, 즉 index.html파일로의 이동 -->
+        <a href="/" class="logo">
+            <img src="../images/starbucks_logo.png" alt="STARBUCKS">
+        </a>
+
+        <div class="sub-menu">
+            <ul class="menu">
+                <li>
+                    <a href="/signin">Sign In</a>
+                </li>
+                <li>
+                    <a href="javascript:void(0)">My Starbucks</a>
+                </li>
+                <li>
+                    <a href="javascript:void(0)">Customer Service & Ideas</a>
+                </li>
+                <li>
+                    <a href="javascript:void(0)">Find a Store</a>
+                </li>
+            </ul>
+            <div class="search">
+                <input type="text" />
+                <div class="material-icons">search</div>
+            </div>
+        </div>
+
+        <ul class="main-menu">
+            <li class="item">
+                <!-- BEM: HTML 클래스 속석의 작명법 -->
+                <!-- 요소__일부분: 언더 슬래쉬 두개 기호로 요소의 일부분을 표시 -->
+                <!-- 요소--상태: 하이픈 두개로 요소의 상태를 표시 -->
+                <div class="item__name">COFFEE</div>
+                <div class="item__contents">
+                    <div class="contents__menu">
+                        <ul class="inner">
+                            <li>
+                                <h4>커피</h4>
+                                <ul>
+                                    <li>스타벅스 원두</li>
+                                    <li>스타벅스 비아</li>
+                                    <li>스타벅스 오리가미</li>
+                                </ul>
+                            </li>
+                            <li>
+                                <h4>에스프레소 음료</h4>
+                                <ul>
+                                    <li>도피오</li>
+                                    <li>에스프레소 마키아또</li>
+                                    <li>아메리카노</li>
+                                    <li>마키아또</li>
+                                    <li>카푸치노</li>
+                                    <li>라떼</li>
+                                    <li>모카</li>
+                                    <li>리스트레또 비안코</li>
+                                </ul>
+                            </li>
+                            <li>
+                                <h4>커피 이야기</h4>
+                                <ul>
+                                  <li>스타벅스 로스트 스팩트럼</li>
+                                  <li>최상의 아라비카 원두</li>
+                                  <li>한 잔의 커피가 완성되기까지</li>
+                                  <li>클로버® 커피 추출 시스템</li>
+                                </ul>
+                            </li>
+                            <li>
+                                <h4>최상의 커피를 즐기는 법</h4>
+                                <ul>
+                                  <li>커피 프레스</li>
+                                  <li>푸어 오버</li>
+                                  <li>아이스 푸어 오버</li>
+                                  <li>커피 메이커</li>
+                                  <li>리저브를 매장에서 다양하게 즐기는 법</li>
+                                </ul>
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="contents__texture">
+                        <div class="inner">
+                            <h4>나와 어울리는 커피 찾기</h4>
+                            <p>스타벅스가 여러분에게 어울리는 커피를 찾아드립니다.</p>
+                            <h4>최상의 커피를 즐기는 법</h4>
+                            <p>여러가지 방법을 통해 다양한 풍미의 커피를 즐겨보세요.</p>
+                        </div>
+                    </div>
+                </div>
+            </li>
+            <li class="item">
+                <div class="item__name">MENU</div>
+                <div class="item__contents">
+                    <div class="contents__menu">
+                        <ul class="inner">
+                            <li>
+                              <h4>음료</h4>
+                              <ul>
+                                <li>콜드 브루</li>
+                                <li>브루드 커피</li>
+                                <li>에스프레소</li>
+                                <li>프라푸치노</li>
+                                <li>블렌디드 음료</li>
+                                <li>스타벅스 피지오</li>
+                                <li>티(티바나)</li>
+                                <li>기타 제조 음료</li>
+                                <li>스타벅스 주스(병음료)</li>
+                              </ul>
+                            </li>
+                            <li>
+                              <h4>푸드</h4>
+                              <ul>
+                                <li>베이커리</li>
+                                <li>케익</li>
+                                <li>샌드위치 & 샐러드</li>
+                                <li>따뜻한 푸드</li>
+                                <li>과일 & 요거트</li>
+                                <li>스낵 & 미니 디저트</li>
+                                <li>아이스크림</li>
+                              </ul>
+                            </li>
+                            <li>
+                              <h4>상품</h4>
+                              <ul>
+                                <li>머그</li>
+                                <li>글라스</li>
+                                <li>플라스틱 텀블러</li>
+                                <li>스테인리스 텀블러</li>
+                                <li>보온병</li>
+                                <li>액세서리</li>
+                                <li>커피 용품</li>
+                                <li>패키지 티(티바나)</li>
+                              </ul>
+                            </li>
+                            <li>
+                              <h4>카드</h4>
+                              <ul>
+                                <li>실물카드</li>
+                                <li>e-Gift 카드</li>
+                              </ul>
+                            </li>
+                            <li>
+                              <h4>메뉴 이야기</h4>
+                              <ul>
+                                <li>콜드 브루</li>
+                                <li>스타벅스 티바나</li>
+                              </ul>
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="contents__texture">
+                        <div class="inner">
+                            <h4 class="new">스타벅스 티바나</h4>
+                            <p>다양한 찻잎과 향신료 등 개성있는 재료로 새로운 맛과 향의 티를 선보입니다.</p>
+                          </div>
+                    </div>
+                </div>
+            </li>
+            <li class="item">
+                <div class="item__name">STORE</div>
+                <div class="item__contents">
+                    <div class="contents__menu">
+                        <ul class="inner">
+                            <li>
+                              <h4>매장 찾기</h4>
+                              <ul>
+                                <li>퀵 검색</li>
+                                <li>지역 검색</li>
+                                <li>My 매장</li>
+                              </ul>
+                            </li>
+                            <li>
+                              <h4>매장 이야기</h4>
+                              <ul>
+                                <li>청담스타</li>
+                                <li>티바나 인스파이어드 매장</li>
+                                <li>파미에파크</li>
+                              </ul>
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="contents__texture">
+                        <div class="inner">
+                            <h4>매장 찾기</h4>
+                            <p>보다 빠르게 매장을 찾아보세요.</p>
+                            <h4 class="new">청담스타</h4>
+                            <p>스타벅스 1,000호점인 청담스타점을 만나보세요.</p>
+                        </div>
+                    </div>
+                </div>
+            </li>
+            <li class="item">
+                <div class="item__name">RESPNSIBILITY</div>
+                <div class="item__contents">
+                    <div class="contents__menu">
+                        <ul class="inner">
+                            <li>
+                              <h4>지역 사회 참여 활동</h4>
+                              <ul>
+                                <li>회망배달 캠페인</li>
+                                <li>재능기부 카페 소식</li>
+                                <li>커뮤니티 스토어</li>
+                                <li>청년인재 양성</li>
+                                <li>우리 농산물 사랑 캠페인</li>
+                                <li>우리 문화 지키기</li>
+                              </ul>
+                            </li>
+                            <li>
+                              <h4>환경보호 활동</h4>
+                              <ul>
+                                <li>환경 발자국 줄이기</li>
+                                <li>일회용 컵 없는 매장</li>
+                                <li>커피 원두 재활용</li>
+                              </ul>
+                            </li>
+                            <li>
+                              <h4>윤리 구매</h4>
+                              <ul>
+                                <li>윤리적 원두 구매</li>
+                                <li>공정무역 인증</li>
+                                <li>커피 농가 지원 활동</li>
+                              </ul>
+                            </li>
+                            <li>
+                              <h4>글로벌 사회 공헌</h4>
+                              <ul>
+                                <li>윤리경영 보고서</li>
+                                <li>스타벅스 재단</li>
+                                <li>지구촌 봉사의 달</li>
+                              </ul>
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="contents__texture">
+                        <div class="inner">
+                            <h4>커피원두 재활용</h4>
+                            <p>스타벅스 커피 원두를 재활용 해보세요.</p>
+                        </div>
+                    </div>
+                </div>
+            </li>
+            <li class="item">
+                <div class="item__name">MY STARBUCKS REWARDS</div>
+                <div class="item__contents">
+                    <div class="contents__menu">
+                        <ul class="inner">
+                            <li>
+                              <h4>마이 스타벅스 리워드</h4>
+                              <ul>
+                                <li>마이 스타벅스 리워드 소개</li>
+                                <li>등급 및 혜택</li>
+                                <li>스타벅스 별</li>
+                                <li>자주하는 질문</li>
+                              </ul>
+                            </li>
+                            <li>
+                              <h4>스타벅스 카드</h4>
+                              <ul>
+                                <li>스타벅스 카드 소개</li>
+                                <li>스타벅스 카드 갤러리</li>
+                                <li>등록 및 조회</li>
+                                <li>충전 및 이용안내</li>
+                                <li>분실신고/환불신청</li>
+                                <li>자주하는 질문</li>
+                              </ul>
+                            </li>
+                            <li>
+                              <h4>스타벅스 카드 e-Gift</h4>
+                              <ul>
+                                <li>스타벅스 카드 e-Gift 소개</li>
+                                <li>이용안내</li>
+                                <li>선물하기</li>
+                                <li>자주하는 질문</li>
+                              </ul>
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="contents__texture">
+                        <div class="inner">
+                            <h4>스타벅스 카드 등록하기</h4>
+                            <p>카드 등록 후 리워드 서비스를 누리고 사용내역도 조회해보세요.</p>
+                        </div>
+                    </div>
+                </div>
+            </li>
+            <li class="item">
+                <div class="item__name">WHAT'S NEW</div>
+                <div class="item__contents">
+                    <div class="contents__menu">
+                        <ul class="inner">
+                          <li>
+                            <h4>프로모션 & 이벤트</h4>
+                            <ul>
+                              <li>전체</li>
+                              <li>스타벅스 카드</li>
+                              <li>마이 스타벅스 리워드</li>
+                              <li>온라인</li>
+                              <li>2017 스타벅스 플래너</li>
+                            </ul>
+                          </li>
+                          <li>
+                            <h4>새소식</h4>
+                            <ul>
+                              <li>전체</li>
+                              <li>상품 출시</li>
+                              <li>스타벅스의 문화</li>
+                              <li>스타벅스 사회공헌</li>
+                              <li>스타벅스 카드출시</li>
+                            </ul>
+                          </li>
+                          <li>
+                            <h4>매장별 이벤트</h4>
+                            <ul>
+                              <li>일반 매장</li>
+                              <li>신규 매장</li>
+                            </ul>
+                          </li>
+                        </ul>
+                    </div>
+                    <div class="contents__texture">
+                        <div class="inner">
+                          <h4>매장별 이벤트</h4>
+                          <p>스타벅스의 매장 이벤트 정보를 확인 하실 수 있습니다.</p>
+                          <h4>소셜 스타벅스</h4>
+                          <p>다양한 스타벅스 SNS 채널을 통해 스타벅스를 만나보세요!</p>
+                        </div>
+                    </div>
+                </div>
+            </li>
+        </ul>
+    </div>
+    </header>
+
+    <section class="signin">
+
+    </section>
+
+    <!-- FOOTER -->
+    <footer>
+        <div class="inner">
+            <ul class="menu">
+                <li><a href="javascript:void(0)" class="green">개인정보처리방침</a></li>
+                <li><a href="javascript:void(0)">영상정보처리기기 운영관리 방침</a></li>
+                <li><a href="javascript:void(0)">홈페이지 이용약관</a></li>
+                <li><a href="javascript:void(0)">위치정보 이용약관</a></li>
+                <li><a href="javascript:void(0)">스타벅스 카드 이용약관</a></li>
+                <li><a href="javascript:void(0)">윤리경영 핫라인</a></li>
+            </ul>
+
+            <div class="btn-group">
+                <a href="javascript:void(0)" class="btn btn--white">찾아오시는 길</a>
+                <a href="javascript:void(0)" class="btn btn--white">신규입점제의</a>
+                <a href="javascript:void(0)" class="btn btn--white">사이트 맵</a>
+            </div>
+
+            <div class="info">
+                <span>사업자등록번호 201-81-21515</span>
+                <span>(주)스타벅스 코리아 대표이사 이석구</span>
+                <span>TEL: 02) 3015-1100 / FAX : 02) 3015-1106</span>
+                <span>개인정보 책임자 : 강기원</span>
+            </div>
+
+            <p class="copyright">
+                &copy; <span class="this-year"></span><span> Starbucks Coffee Company. All Rights Reserved.</span>
+            </p>
+            <img src="../images/starbucks_logo_only_text.png" alt="" class="logo" />
+        </div>
+    </footer>
+    
+</body>
+</html>
\ No newline at end of file