diff --git a/client/src/components/region-selector.js b/client/src/components/region-selector.js
index 162bb62..c55615b 100644
--- a/client/src/components/region-selector.js
+++ b/client/src/components/region-selector.js
@@ -1,5 +1,6 @@
 import { html, render } from 'lit-html'
 import i18next from 'i18next'
+import { css, injectGlobal } from 'emotion'
 
 export class regionSelector extends HTMLElement {
 	constructor() {
@@ -23,8 +24,7 @@ export class regionSelector extends HTMLElement {
 
 	render() {
 		return html`
-        ${style}
-        <div class="list">
+        <div class="list ${styles}">
             <ul>
                 <li>
                     <a class="item-link smart-select smart-select-init" data-open-in="popover">
@@ -59,45 +59,46 @@ export class regionSelector extends HTMLElement {
 	}
 }
 
-const style = html`
-<style>
-region-selector .list {
-    margin: 0;
-}
+const styles = css`
+& {
+    & .list {
+        margin: 0;
+    }
 
-region-selector .smart-select div.item-title {
-    max-width: none;
-    text-align: center;
-    font-size: 12px;
-}
+    & .smart-select div.item-title {
+        max-width: none;
+        text-align: center;
+        font-size: 12px;
+    }
 
-region-selector .smart-select div.item-after {
-    width: 100px;
-    max-width: none;
-    text-align: center;
-    font-weight: bold;
-}
+    & .smart-select div.item-after {
+        width: 100px;
+        max-width: none;
+        text-align: center;
+        font-weight: bold;
+    }
 
-region-selector .list ul:after, region-selector .list ul:before {
-    background-color: transparent;
-}
+    & .list ul:after, & .list ul:before {
+        background-color: transparent;
+    }
 
-region-selector .item-inner {
-    padding-left: 15px;
-}
+    & .item-inner {
+        padding-left: 15px;
+    }
 
-region-selector .item-inner:before {
-    content: 'chevron_down' !important;
+    & .item-inner:before {
+        content: 'chevron_down' !important;
+    }    
 }
-
+`
+injectGlobal`
 [data-select-name="region"] .popover-inner {    
     max-height: none;
-}
+}    
 
 [data-select-name="region"].popover-on-right {
     width: 180px;
 }
-</style>
-`
+` 
 
 customElements.define(`region-selector`, regionSelector)
diff --git a/client/src/components/swiper-slider-nearby.js b/client/src/components/swiper-slider-nearby.js
deleted file mode 100644
index af8242b..0000000
--- a/client/src/components/swiper-slider-nearby.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import { html, render } from 'lit-html'
-import i18next from 'i18next'
-
-export class SwiperSliderNearby extends HTMLElement {
-	constructor() {
-		super()
-	}
-
-	connectedCallback() {
-		render(this.render(), this)		
-	}
-
-	render() {
-		return html`
-		${style}
-		<div data-pagination='{"el": ".swiper-pagination"}' data-space-between="10" data-slides-per-view="2" class="swiper-container swiper-init demo-swiper">
-            <div class="swiper-pagination"></div>
-            <div class="swiper-wrapper">
-                <div class="swiper-slide">${i18next.t(`PICTURE_1`)}</div>
-                <div class="swiper-slide">음식점</div>
-                <div class="swiper-slide">관광지</div>
-                <div class="swiper-slide">느낌적인 느낌</div>
-                <div class="swiper-slide">Slide 5</div>
-                <div class="swiper-slide">Slide 6</div>
-            </div>
-        </div>
-        `
-	}
-}
-
-const style = html`
-<style>
-swiper-slider-nearby {
-    height: 120px;
-    margin: 1px;
-    position: relative;
-
-    margin: 5px;
-    border-radius: 3px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    border-radius: 15px;
-    overflow: hidden;
-}
-
-swiper-slider-nearby .swiper-container {
-    width: 100%;
-    height: 100%;
-}
-
-swiper-slider-nearby .swiper-slide {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-swiper-slider-nearby .swiper-slide:nth-child(1) {
-    background-image: url(https://storage.googleapis.com/mac-tour-251517.appspot.com/breweries/brewery4.jpeg);
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-position: center;
-    
-}
-</style>
-`
-
-customElements.define(`swiper-slider-nearby`, SwiperSliderNearby)
diff --git a/client/src/components/swiper-slider.js b/client/src/components/swiper-slider.js
index 9bd812f..755c74f 100644
--- a/client/src/components/swiper-slider.js
+++ b/client/src/components/swiper-slider.js
@@ -1,5 +1,6 @@
 import { html, render } from 'lit-html'
 import i18next from 'i18next'
+import { css, injectGlobal } from 'emotion'
 
 export class SwiperSlider extends HTMLElement {
 	constructor() {
@@ -12,22 +13,28 @@ export class SwiperSlider extends HTMLElement {
 
 	render() {
 		return html`
-		${style}
-		<div data-pagination='{"el": ".swiper-pagination"}' data-space-between="50" class="swiper-container swiper-init demo-swiper">
-            <div class="swiper-pagination"></div>
-            <div class="swiper-wrapper">
-                <div class="swiper-slide">${i18next.t(`PICTURE_1`)}</div>
-                <div class="swiper-slide">Slide 2</div>
-                <div class="swiper-slide">Slide 3</div>
+        <div class="swiper-wrap ${styles}">
+            <div data-pagination='{"el": ".swiper-pagination"}' data-space-between="50" class="swiper-container swiper-init demo-swiper">
+                <div class="swiper-pagination"></div>
+                <div class="swiper-wrapper">
+                    <div class="swiper-slide">${i18next.t(`PICTURE_1`)}</div>
+                    <div class="swiper-slide">Slide 2</div>
+                    <div class="swiper-slide">Slide 3</div>
+                </div>
             </div>
-        </div>
+        </div>		
         `
 	}
 }
 
-const style = html`
-<style>
+injectGlobal`
 swiper-slider {
+    overflow: hidden;
+}
+`
+
+const styles = css`
+& {
     height: 150px;
     margin: 1px;
     position: relative;
@@ -40,27 +47,25 @@ swiper-slider {
 
     border-radius: 15px;
     overflow: hidden;
-}
 
-swiper-slider .swiper-container {
-    width: 100%;
-    height: 100%;
-}
+    & .swiper-container {
+        width: 100%;
+        height: 100%;
+    }
 
-swiper-slider .swiper-slide {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
+    & .swiper-slide {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
 
-swiper-slider .swiper-slide:nth-child(1) {
-    background-image: url(https://storage.googleapis.com/mac-tour-251517.appspot.com/breweries/seoul-brewery1.jpg);
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-position: center;
-    
+    & .swiper-slide:nth-child(1) {
+        background-image: url(https://storage.googleapis.com/mac-tour-251517.appspot.com/breweries/seoul-brewery1.jpg);
+        background-repeat: no-repeat;
+        background-size: cover;
+        background-position: center;
+    }
 }
-</style>
 `
 
 customElements.define(`swiper-slider`, SwiperSlider)
diff --git a/client/src/pages/page-detail.js b/client/src/pages/page-detail.js
index 307ea9f..1266db0 100644
--- a/client/src/pages/page-detail.js
+++ b/client/src/pages/page-detail.js
@@ -1,8 +1,8 @@
 import { html, render } from 'lit-html'
 // import i18next from 'i18next'
+import { css } from 'emotion'
 
 import '../components/swiper-slider.js'
-import '../components/swiper-slider-nearby'
 
 export class PageDetail extends HTMLElement {
 	constructor() {
@@ -17,8 +17,7 @@ export class PageDetail extends HTMLElement {
 
 	render() {
 		return html`
-		${style}
-		<div id="pageDetail" class="page-content">
+		<div id="pageDetail" class="page-content ${styles}">
             <header>
                 <a class="btn-back" href="/"><i class="f7-icons">chevron_left</i></a>
                 <div class="brew-name">브루어리 이름</div>
@@ -46,23 +45,8 @@ export class PageDetail extends HTMLElement {
 	} 
 }
 
-const style = html`
-<style>
-page-detail {
-    display: flex;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    padding: 0;
-    justify-content: center;
-    align-items: center;
-    overflow: hidden;
-}
-
-page-detail #pageDetail {
+const styles = css`
+& {
     border: 1px solid #595959;
     width: 100%;
     height: 100%;
@@ -72,96 +56,85 @@ page-detail #pageDetail {
 
     display: grid;
     grid-template-rows: 50px auto;
-}
-
-page-detail header {
-    display: grid;
-    grid-template-columns: 50px auto;
-    align-items: center;
-    position: relative;    
-}
-
-page-detail header:after {
-    content: '';
-    position: absolute;
-    right: 0;
-    width: 100%;
-    top: 100%;
-    bottom: auto;
-    height: 10px;
-    pointer-events: none;
-    background: linear-gradient(to bottom,rgba(0,0,0,.3) 0,rgba(0,0,0,.1) 40%,rgba(0,0,0,.05) 50%,rgba(0,0,0,0) 80%,rgba(0,0,0,0) 100%);
-}
 
-page-detail .btn-back {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-}
-
-page-detail main {
-    display: grid;
-    grid-auto-rows: 150px 40px auto;
-    grid-row-gap: 5px;
-    overflow: hidden;
-}
-
-page-detail #tMap {
-    height: 100%;
-    margin: 3px !important;
-    position: relative;
-    background-color: #EEEEEE;
-}
-
-page-detail .btn-list {
-    margin: 5px;
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-column-gap: 10px;
-}
-
-page-detail .btn-list span {
-    background-color: #EEEEEE;
-    height: 50px;
-    margin: 5px;
-    border-radius: 3px;
-    color: #999999;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-}
-
-page-detail .logo, page-detail .title, page-detail .select-local, page-detail .my-local, page-detail footer span {
-    background-color: #EEEEEE;
-    margin: 5px;
-    border-radius: 3px;
-    color: #999999;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-page-detail button, page-detail .brew-name {  
-    margin: 3px;
-    border: 0;
-    color: black;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-page-detail .brew-name {    
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 0;
-    padding-left: 20px;
-    padding-right: 50px;
-    font-weight: bold;
+    & header {
+        display: grid;
+        grid-template-columns: 50px auto;
+        align-items: center;
+        position: relative;
+
+        &:after {
+            content: '';
+            position: absolute;
+            right: 0;
+            width: 100%;
+            top: 100%;
+            bottom: auto;
+            height: 10px;
+            pointer-events: none;
+            background: linear-gradient(to bottom,rgba(0,0,0,.3) 0,rgba(0,0,0,.1) 40%,rgba(0,0,0,.05) 50%,rgba(0,0,0,0) 80%,rgba(0,0,0,0) 100%);
+        }
+
+        & .btn-back {
+            display: flex;
+            align-items: center;
+            justify-content: center;        
+        }        
+
+        & .brew-name {    
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 0;
+            padding-left: 20px;
+            padding-right: 50px;
+            font-weight: bold;
+        }
+    }
+
+    & main {
+        display: grid;
+        grid-auto-rows: 150px 40px auto;
+        grid-row-gap: 5px;
+        overflow: hidden;
+
+        & #tMap {
+            height: 100%;
+            margin: 3px !important;
+            position: relative;
+            background-color: #EEEEEE;
+        }
+
+        & .btn-list {
+            margin: 5px;
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            grid-column-gap: 10px;
+
+            & span {
+                background-color: #EEEEEE;
+                height: 50px;
+                margin: 5px;
+                border-radius: 3px;
+                color: #999999;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                text-align: center;
+            }
+        }
+
+        & .logo, & .title, & .select-local, & .my-local, & footer span {
+            background-color: #EEEEEE;
+            margin: 5px;
+            border-radius: 3px;
+            color: #999999;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }        
+    }
 }
-</style>
 `
 
 customElements.define(`page-detail`, PageDetail)
diff --git a/client/src/pages/page-main.js b/client/src/pages/page-main.js
index 16cb93c..850b3eb 100644
--- a/client/src/pages/page-main.js
+++ b/client/src/pages/page-main.js
@@ -1,5 +1,6 @@
 import { html, render } from 'lit-html'
 import { styleMap } from 'lit-html/directives/style-map.js'
+import { css } from 'emotion'
 
 // import i18next from 'i18next'
 import { loadXhr } from '../libs/actions.js'
@@ -19,8 +20,7 @@ export class PageMain extends HTMLElement {
 
 	render() {
 		return html`
-		${style}
-		<div id="pageMain" class="page-content">
+		<div id="pageMain" class="page-content ${styles}">
             <header>				
                 <region-selector></region-selector>
             </header>
@@ -68,23 +68,8 @@ export class PageMain extends HTMLElement {
 	}    
 }
 
-const style = html`
-<style>
-page-main {
-    display: flex;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    padding: 0;
-    justify-content: center;
-    align-items: center;
-    overflow: hidden;    
-}
-
-#pageMain {
+const styles = css`
+& {
     border: 1px solid #595959;
     width: 100%;
     height: 100%;
@@ -94,83 +79,82 @@ page-main {
 
     display: grid;
     grid-template-rows: 50px auto;
-}
-
-page-main header {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: relative;
-}
-
-page-main header:after {
-    content: '';
-    position: absolute;
-    right: 0;
-    width: 100%;
-    top: 100%;
-    bottom: auto;
-    height: 10px;
-    pointer-events: none;
-    background: linear-gradient(to bottom,rgba(0,0,0,.3) 0,rgba(0,0,0,.1) 40%,rgba(0,0,0,.05) 50%,rgba(0,0,0,0) 80%,rgba(0,0,0,0) 100%);
-}
-
-page-main main {
-    overflow: scroll;
-}
-
-#pageMain .content {
-    height: 150px;
-    cursor: pointer;
-
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: cover;
-     
-    border-radius: 10px;
-
-    color: white;
-    text-transform: uppercase;
-
-    position: relative;
-}
-
-#pageMain .region-title {
-    font-size: 24px;
-    margin-top: 10px;
-    display: block;
-    text-align: center;
-    font-family: Jua;
-}
-
-#pageMain .content .region-text {
-    display: none;
-    position: absolute;
-    top: 5px;
-    left: 5px;
-    font-size: 20px;
-    padding: 0 5px;
-    height: 25px;
-    line-height: 25px;
-}
-
-#pageMain .content > span {    
-    font-family: 'Jua', sans-serif;    
-    font-size: 25px;
-    background-color: rgba(0, 0, 0, 0.3);
-    padding: 0 10px;
-}
 
-page-main .logo, page-main .title, page-main .select-local, page-main .my-local, page-main footer span, page-main .content, page-main .search {
-    background-color: #EEEEEE;
-    margin: 5px;
-    border-radius: 3px;
-    color: #999999;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    & header {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+
+        &:after {
+            content: '';
+            position: absolute;
+            right: 0;
+            width: 100%;
+            top: 100%;
+            bottom: auto;
+            height: 10px;
+            pointer-events: none;
+            background: linear-gradient(to bottom,rgba(0,0,0,.3) 0,rgba(0,0,0,.1) 40%,rgba(0,0,0,.05) 50%,rgba(0,0,0,0) 80%,rgba(0,0,0,0) 100%);
+        }
+    }
+
+    & main {
+        overflow: scroll;
+
+        & .content {
+            height: 150px;
+            cursor: pointer;
+
+            background-repeat: no-repeat;
+            background-position: center;
+            background-size: cover;
+            
+            border-radius: 10px;
+
+            color: white;
+            text-transform: uppercase;
+
+            position: relative;
+
+            & .region-text {
+                display: none;
+                position: absolute;
+                top: 5px;
+                left: 5px;
+                font-size: 20px;
+                padding: 0 5px;
+                height: 25px;
+                line-height: 25px;
+            }
+
+            & > span {    
+                font-family: 'Jua', sans-serif;    
+                font-size: 25px;
+                background-color: rgba(0, 0, 0, 0.3);
+                padding: 0 10px;
+            }
+        }
+
+        & .region-title {
+            font-size: 24px;
+            margin-top: 10px;
+            display: block;
+            text-align: center;
+            font-family: Jua;
+        }        
+    }
+
+    & .logo, & .title, & .select-local, & .my-local, & footer span, & .content, & .search {
+        background-color: #EEEEEE;
+        margin: 5px;
+        border-radius: 3px;
+        color: #999999;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
 }
-</style>
 `
 
 customElements.define(`page-main`, PageMain)
diff --git a/client/www/index.html b/client/www/index.html
index f4950d8..99467cd 100644
--- a/client/www/index.html
+++ b/client/www/index.html
@@ -28,8 +28,8 @@
     <script src="cordova.js"></script>
     <script src="js/polyfill.min.js"></script>
     <script src="js/custom-elements-es5-adapter.js"></script>
-    <script src="js/webcomponents-sd-ce-pf.js"></script>    
-    <script src="main-bundle.js"></script>    
+    <script src="js/webcomponents-sd-ce-pf.js"></script>
     <script src="https://apis.openapi.sk.com/tmap/js?version=1&format=javascript&appKey=20a000fc-d6c7-4bdd-909c-3e5f89c4868e"></script>
+    <script src="main-bundle.js"></script>
 </body>
 </html>