최초커밋

.idea/.name

+font.css
\ No newline at end of file

.idea/TDS_Myshop_Total.iml

+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file

.idea/modules.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/TDS_Myshop_Total.iml" filepath="$PROJECT_DIR$/.idea/TDS_Myshop_Total.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file

.idea/vcs.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file

.idea/workspace.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ChangeListManager">
+    <list default="true" id="aa950ab4-2697-4ae4-8f52-98cb9c68dc5d" name="Default Changelist" comment="">
+      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+    </list>
+    <option name="SHOW_DIALOG" value="false" />
+    <option name="HIGHLIGHT_CONFLICTS" value="true" />
+    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
+    <option name="LAST_RESOLUTION" value="IGNORE" />
+  </component>
+  <component name="Git.Settings">
+    <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
+  </component>
+  <component name="ProjectId" id="1tN5tSVFig8DPCHqxgohTyke5Sp" />
+  <component name="ProjectViewState">
+    <option name="hideEmptyMiddlePackages" value="true" />
+    <option name="showLibraryContents" value="true" />
+  </component>
+  <component name="PropertiesComponent">
+    <property name="RunOnceActivity.OpenProjectViewOnStart" value="true" />
+    <property name="RunOnceActivity.ShowReadmeOnStart" value="true" />
+    <property name="WebServerToolWindowFactoryState" value="false" />
+    <property name="last_opened_file_path" value="$PROJECT_DIR$" />
+    <property name="vue.rearranger.settings.migration" value="true" />
+  </component>
+  <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
+  <component name="TaskManager">
+    <task active="true" id="Default" summary="Default task">
+      <changelist id="aa950ab4-2697-4ae4-8f52-98cb9c68dc5d" name="Default Changelist" comment="" />
+      <created>1622596920472</created>
+      <option name="number" value="Default" />
+      <option name="presentableId" value="Default" />
+      <updated>1622596920472</updated>
+      <workItem from="1622596921927" duration="31000" />
+      <workItem from="1624612444936" duration="648000" />
+      <workItem from="1624615241463" duration="2000" />
+      <workItem from="1625044213303" duration="305000" />
+      <workItem from="1625117603161" duration="50000" />
+    </task>
+    <servers />
+  </component>
+  <component name="TypeScriptGeneratedFilesManager">
+    <option name="version" value="3" />
+  </component>
+</project>
\ No newline at end of file

common/scss/font.css

+/* bold */
+@font-face {
+  font-family: 'Spoqa Han Sans';
+  font-weight: 700;
+  src: local("Spoqa Han Sans Bold"), url("../assets/fonts/SpoqaHanSansNeo-Bold.woff2") format("woff2"), url("../assets/fonts/SpoqaHanSansNeo-Bold.woff") format("woff"), url("../assets/fonts/SpoqaHanSansNeo-Bold.ttf") format("truetype");
+}
+
+/* medium */
+@font-face {
+  font-family: 'Spoqa Han Sans';
+  font-weight: 500;
+  src: local("Spoqa Han Sans Medium"), url("../assets/fonts/SpoqaHanSansNeo-Medium.woff2") format("woff2"), url("../assets/fonts/SpoqaHanSansNeo-Medium.woff") format("woff"), url("../assets/fonts/SpoqaHanSansNeo-Medium.ttf") format("truetype");
+}
+
+/* normal */
+@font-face {
+  font-family: 'Spoqa Han Sans';
+  font-weight: 400;
+  src: local("Spoqa Han Sans Regular"), url("../assets/fonts/SpoqaHanSansNeo-Regular.woff2") format("woff2"), url("../assets/fonts/SpoqaHanSansNeo-Regular.woff") format("woff"), url("../assets/fonts/SpoqaHanSansNeo-Regular.ttf") format("truetype");
+}
+
+/* right */
+@font-face {
+  font-family: 'Spoqa Han Sans';
+  font-weight: 300;
+  src: local("Spoqa Han Sans Light"), url("../assets/fonts/SpoqaHanSansNeo-Light.woff2") format("woff2"), url("../assets/fonts/SpoqaHanSansNeo-Light.woff") format("woff"), url("../assets/fonts/SpoqaHanSansNeo-Light.ttf") format("truetype");
+}
+
+/* right */
+@font-face {
+  font-family: 'Apple SD Gothic Neo';
+  font-weight: 300;
+  src: local("Apple SD Gothic Neo"), url("../assets/fonts/applesdgothicneo.woff") format("woff");
+}
+
+/* right */
+@font-face {
+  font-family: 'NotoSansCJKkr';
+  font-weight: 300;
+  src: local("NotoSansCJKkr"), url("../assets/fonts/NotoSansKR-Medium.woff2") format("woff2"), url("../assets/fonts/NotoSansKR-Medium.woff") format("woff");
+}
+/*# sourceMappingURL=font.css.map */
\ No newline at end of file

common/scss/font.css.map

+{
+    "version": 3,
+    "mappings": "AAAA,UAAU;AACV,UAAU;EACN,WAAW,EAAE,gBAAgB;EAC7B,WAAW,EAAE,GAAG;EAChB,GAAG,EAAE,4BAA4B,EAC7B,iDAAiD,CAAC,eAAe,EACjE,gDAAgD,CAAC,cAAc,EAC/D,+CAA+C,CAAC,kBAAkB;;;AAG1E,YAAY;AACZ,UAAU;EACN,WAAW,EAAE,gBAAgB;EAC7B,WAAW,EAAE,GAAG;EAChB,GAAG,EAAE,8BAA8B,EAC/B,mDAAmD,CAAC,eAAe,EACnE,kDAAkD,CAAC,cAAc,EACjE,iDAAiD,CAAC,kBAAkB;;;AAG5E,YAAY;AACZ,UAAU;EACN,WAAW,EAAE,gBAAgB;EAC7B,WAAW,EAAE,GAAG;EAChB,GAAG,EAAE,+BAA+B,EAChC,oDAAoD,CAAC,eAAe,EACpE,mDAAmD,CAAC,cAAc,EAClE,kDAAkD,CAAC,kBAAkB;;;AAG7E,WAAW;AACX,UAAU;EACN,WAAW,EAAE,gBAAgB;EAC7B,WAAW,EAAE,GAAG;EAChB,GAAG,EAAE,6BAA6B,EAC9B,kDAAkD,CAAC,eAAe,EAClE,iDAAiD,CAAC,cAAc,EAChE,gDAAgD,CAAC,kBAAkB;;;AAG3E,WAAW;AACX,UAAU;EACN,WAAW,EAAE,qBAAqB;EAClC,WAAW,EAAE,GAAG;EAChB,GAAG,EAAE,4BAA4B,EAC7B,4CAA4C,CAAC,cAAc;;;AAGnE,WAAW;AACX,UAAU;EACN,WAAW,EAAE,eAAe;EAC5B,WAAW,EAAE,GAAG;EAChB,GAAG,EAAE,sBAAsB,EACvB,8CAA8C,CAAC,eAAe,EAC9D,6CAA6C,CAAC,cAAc",
+    "sources": [
+        "font.scss"
+    ],
+    "names": [],
+    "file": "font.css"
+}
\ No newline at end of file

common/scss/font.scss

+/* bold */
+@font-face {
+    font-family: 'Spoqa Han Sans';
+    font-weight: 700;
+    src: local('Spoqa Han Sans Bold'),
+        url('../assets/fonts/SpoqaHanSansNeo-Bold.woff2') format('woff2'),
+        url('../assets/fonts/SpoqaHanSansNeo-Bold.woff') format('woff'),
+        url('../assets/fonts/SpoqaHanSansNeo-Bold.ttf') format('truetype');
+}
+
+/* medium */
+@font-face {
+    font-family: 'Spoqa Han Sans';
+    font-weight: 500;
+    src: local('Spoqa Han Sans Medium'),
+        url('../assets/fonts/SpoqaHanSansNeo-Medium.woff2') format('woff2'),
+        url('../assets/fonts/SpoqaHanSansNeo-Medium.woff') format('woff'),
+        url('../assets/fonts/SpoqaHanSansNeo-Medium.ttf') format('truetype');
+}
+
+/* normal */
+@font-face {
+    font-family: 'Spoqa Han Sans';
+    font-weight: 400;
+    src: local('Spoqa Han Sans Regular'),
+        url('../assets/fonts/SpoqaHanSansNeo-Regular.woff2') format('woff2'),
+        url('../assets/fonts/SpoqaHanSansNeo-Regular.woff') format('woff'),
+        url('../assets/fonts/SpoqaHanSansNeo-Regular.ttf') format('truetype');
+}
+
+/* right */
+@font-face {
+    font-family: 'Spoqa Han Sans';
+    font-weight: 300;
+    src: local('Spoqa Han Sans Light'),
+        url('../assets/fonts/SpoqaHanSansNeo-Light.woff2') format('woff2'),
+        url('../assets/fonts/SpoqaHanSansNeo-Light.woff') format('woff'),
+        url('../assets/fonts/SpoqaHanSansNeo-Light.ttf') format('truetype');
+}
+
+/* right */
+@font-face {
+    font-family: 'Apple SD Gothic Neo';
+    font-weight: 300;
+    src: local('Apple SD Gothic Neo'),
+        url('../assets/fonts/applesdgothicneo.woff') format('woff');
+}
+
+/* right */
+@font-face {
+    font-family: 'NotoSansCJKkr';
+    font-weight: 300;
+    src: local('NotoSansCJKkr'),
+        url('../assets/fonts/NotoSansKR-Medium.woff2') format('woff2'),
+        url('../assets/fonts/NotoSansKR-Medium.woff') format('woff');
+}
\ No newline at end of file

common/scss/reset.css

+/* bold */
+@font-face {
+  font-family: 'Spoqa Han Sans';
+  font-weight: 700;
+  src: local("Spoqa Han Sans Bold"), url("../assets/fonts/SpoqaHanSansNeo-Bold.woff2") format("woff2"), url("../assets/fonts/SpoqaHanSansNeo-Bold.woff") format("woff"), url("../assets/fonts/SpoqaHanSansNeo-Bold.ttf") format("truetype");
+}
+
+/* medium */
+@font-face {
+  font-family: 'Spoqa Han Sans';
+  font-weight: 500;
+  src: local("Spoqa Han Sans Medium"), url("../assets/fonts/SpoqaHanSansNeo-Medium.woff2") format("woff2"), url("../assets/fonts/SpoqaHanSansNeo-Medium.woff") format("woff"), url("../assets/fonts/SpoqaHanSansNeo-Medium.ttf") format("truetype");
+}
+
+/* normal */
+@font-face {
+  font-family: 'Spoqa Han Sans';
+  font-weight: 400;
+  src: local("Spoqa Han Sans Regular"), url("../assets/fonts/SpoqaHanSansNeo-Regular.woff2") format("woff2"), url("../assets/fonts/SpoqaHanSansNeo-Regular.woff") format("woff"), url("../assets/fonts/SpoqaHanSansNeo-Regular.ttf") format("truetype");
+}
+
+/* right */
+@font-face {
+  font-family: 'Spoqa Han Sans';
+  font-weight: 300;
+  src: local("Spoqa Han Sans Light"), url("../assets/fonts/SpoqaHanSansNeo-Light.woff2") format("woff2"), url("../assets/fonts/SpoqaHanSansNeo-Light.woff") format("woff"), url("../assets/fonts/SpoqaHanSansNeo-Light.ttf") format("truetype");
+}
+
+/* right */
+@font-face {
+  font-family: 'Apple SD Gothic Neo';
+  font-weight: 300;
+  src: local("Apple SD Gothic Neo"), url("../assets/fonts/applesdgothicneo.woff") format("woff");
+}
+
+/* right */
+@font-face {
+  font-family: 'NotoSansCJKkr';
+  font-weight: 300;
+  src: local("NotoSansCJKkr"), url("../assets/fonts/NotoSansKR-Medium.woff2") format("woff2"), url("../assets/fonts/NotoSansKR-Medium.woff") format("woff");
+}
+
+/* rest */
+html,
+body,
+form,
+div,
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+dl,
+dt,
+dd,
+ul,
+ol,
+li,
+fieldset,
+a,
+button,
+input,
+select,
+textarea,
+table,
+th,
+td,
+figure,
+hr,
+i,
+b {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  height: 100%;
+}
+
+html {
+  height: 100%;
+}
+/*# sourceMappingURL=reset.css.map */
\ No newline at end of file

common/scss/reset.css.map

+{
+    "version": 3,
+    "mappings": "ACAA,UAAU;AACV,UAAU;EACN,WAAW,EAAE,gBAAgB;EAC7B,WAAW,EAAE,GAAG;EAChB,GAAG,EAAE,4BAA4B,EAC7B,iDAAiD,CAAC,eAAe,EACjE,gDAAgD,CAAC,cAAc,EAC/D,+CAA+C,CAAC,kBAAkB;;;AAG1E,YAAY;AACZ,UAAU;EACN,WAAW,EAAE,gBAAgB;EAC7B,WAAW,EAAE,GAAG;EAChB,GAAG,EAAE,8BAA8B,EAC/B,mDAAmD,CAAC,eAAe,EACnE,kDAAkD,CAAC,cAAc,EACjE,iDAAiD,CAAC,kBAAkB;;;AAG5E,YAAY;AACZ,UAAU;EACN,WAAW,EAAE,gBAAgB;EAC7B,WAAW,EAAE,GAAG;EAChB,GAAG,EAAE,+BAA+B,EAChC,oDAAoD,CAAC,eAAe,EACpE,mDAAmD,CAAC,cAAc,EAClE,kDAAkD,CAAC,kBAAkB;;;AAG7E,WAAW;AACX,UAAU;EACN,WAAW,EAAE,gBAAgB;EAC7B,WAAW,EAAE,GAAG;EAChB,GAAG,EAAE,6BAA6B,EAC9B,kDAAkD,CAAC,eAAe,EAClE,iDAAiD,CAAC,cAAc,EAChE,gDAAgD,CAAC,kBAAkB;;;AAG3E,WAAW;AACX,UAAU;EACN,WAAW,EAAE,qBAAqB;EAClC,WAAW,EAAE,GAAG;EAChB,GAAG,EAAE,4BAA4B,EAC7B,4CAA4C,CAAC,cAAc;;;AAGnE,WAAW;AACX,UAAU;EACN,WAAW,EAAE,eAAe;EAC5B,WAAW,EAAE,GAAG;EAChB,GAAG,EAAE,sBAAsB,EACvB,8CAA8C,CAAC,eAAe,EAC9D,6CAA6C,CAAC,cAAc;;;ADlDpE,UAAU;AACV,AAAA,IAAI;AACJ,IAAI;AACJ,IAAI;AACJ,GAAG;AACH,CAAC;AACD,EAAE;AACF,EAAE;AACF,EAAE;AACF,EAAE;AACF,EAAE;AACF,EAAE;AACF,EAAE;AACF,EAAE;AACF,EAAE;AACF,EAAE;AACF,EAAE;AACF,EAAE;AACF,QAAQ;AACR,CAAC;AACD,MAAM;AACN,KAAK;AACL,MAAM;AACN,QAAQ;AACR,KAAK;AACL,EAAE;AACF,EAAE;AACF,MAAM;AACN,EAAE;AACF,CAAC;AACD,CAAC,CAAC;EACE,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;CACb;;AAED,AAAA,IAAI,CAAC;EACD,MAAM,EAAE,IAAI;CACf;;AAED,AAAA,IAAI,CAAC;EACD,MAAM,EAAE,IAAI;CACf",
+    "sources": [
+        "reset.scss",
+        "font.scss"
+    ],
+    "names": [],
+    "file": "reset.css"
+}
\ No newline at end of file

common/scss/reset.scss

+@charset "UTF-8";
+
+@import "font.scss";
+
+/* rest */
+html,
+body,
+form,
+div,
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+dl,
+dt,
+dd,
+ul,
+ol,
+li,
+fieldset,
+a,
+button,
+input,
+select,
+textarea,
+table,
+th,
+td,
+figure,
+hr,
+i,
+b {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    height: 100%;
+}
+
+html {
+    height: 100%;
+}

images/icon-arrow-right-10px.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10">
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <g>
+                <g>
+                    <path d="M0 0H10V10H0z" transform="translate(-202 -127) translate(140 123) translate(62 4)"/>
+                    <path fill="#222" fill-rule="nonzero" d="M4.126 2.126c.148-.15.38-.166.546-.05l.06.05 2.571 2.571c.149.149.165.38.05.547l-.05.059-2.571 2.571c-.168.168-.44.168-.606 0-.15-.148-.166-.38-.05-.546l.05-.06L6.394 5 4.126 2.732c-.15-.15-.166-.38-.05-.547l.05-.06z" transform="translate(-202 -127) translate(140 123) translate(62 4)"/>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

images/icon-tds-category-5g-phone.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">
+    <defs>
+        <linearGradient id="99exj03aca" x1="50%" x2="50%" y1="0%" y2="100%">
+            <stop offset="0%" stop-color="#FE8578"/>
+            <stop offset="100%" stop-color="#FD7768"/>
+        </linearGradient>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <g>
+                <g>
+                    <path fill="#F6F8FA" fill-opacity="0" d="M0 0L30 0 30 30 0 30z" transform="translate(-45 -395) translate(30 387) translate(15 8)"/>
+                    <path fill="url(#99exj03aca)" d="M8 21.95h14c.552 0 1 .448 1 1v3H7v-3c0-.552.448-1 1-1z" transform="translate(-45 -395) translate(30 387) translate(15 8)"/>
+                    <path fill="#222" fill-rule="nonzero" d="M21.546 2.75c1.162 0 2.118.894 2.198 2.03l.006.157v20.126c0 1.157-.905 2.102-2.047 2.182l-.157.005H8.454c-1.162 0-2.118-.894-2.198-2.03l-.006-.157V4.937c0-1.157.905-2.102 2.047-2.182l.157-.005h13.092zm0 1.5H8.454c-.358 0-.651.26-.698.595l-.006.092v20.126c0 .346.263.635.608.68l.096.007h13.092c.358 0 .651-.26.698-.595l.006-.092V4.937c0-.346-.263-.635-.608-.68l-.096-.007z" transform="translate(-45 -395) translate(30 387) translate(15 8)"/>
+                    <path fill="#222" fill-rule="nonzero" d="M16 5.7c.414 0 .75.336.75.75 0 .38-.282.693-.648.743L16 7.2h-2c-.414 0-.75-.336-.75-.75 0-.38.282-.693.648-.743L14 5.7h2zM14.1 11.85c.277 0 .5.224.5.5 0 .245-.176.45-.41.492l-.09.008H12.47l-.125.673.156-.004c1.05 0 1.836.756 1.908 1.784l.006.156c0 1.103-.807 1.891-1.914 1.891-.482 0-.94-.172-1.298-.479-.21-.179-.235-.495-.056-.705.18-.21.495-.234.705-.055.18.154.407.239.649.239.56 0 .914-.346.914-.89 0-.561-.37-.941-.914-.941-.188 0-.333.024-.447.072l-.08.042c-.344.214-.773-.049-.764-.432l.009-.084.344-1.858c.039-.208.202-.365.404-.401l.088-.008h2.047zm3.4 0c.264 0 .522.045.768.132.121.043.239.096.352.158.242.133.33.437.196.68-.133.241-.437.33-.679.196-.065-.036-.133-.067-.203-.091-.14-.05-.285-.075-.434-.075-.814 0-1.5.771-1.5 1.75s.686 1.75 1.5 1.75c.193 0 .381-.043.556-.125l.052-.028V15.1h-.53c-.245 0-.45-.177-.492-.41l-.008-.09c0-.245.177-.45.41-.492l.09-.008h1.03c.246 0 .45.177.492.41l.008.09v1.873c0 .158-.074.306-.2.4-.41.308-.898.477-1.408.477-1.395 0-2.5-1.243-2.5-2.75s1.105-2.75 2.5-2.75z" transform="translate(-45 -395) translate(30 387) translate(15 8)"/>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

images/icon-tds-category-5g-tablet.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">
+    <defs>
+        <linearGradient id="w28q0o5yca" x1="50%" x2="50%" y1="0%" y2="100%">
+            <stop offset="0%" stop-color="#FE8578"/>
+            <stop offset="100%" stop-color="#FD7768"/>
+        </linearGradient>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <g>
+                <g>
+                    <g transform="translate(-205 -395) translate(30 387) translate(160) translate(15 8)">
+                        <path fill="#F6F8FA" fill-opacity="0" d="M0 0L30 0 30 30 0 30z"/>
+                        <path fill="url(#w28q0o5yca)" d="M4.357 6h4.286C8.84 6 9 6.576 9 7.286v15.428C9 23.424 8.84 24 8.643 24H4.357C4.16 24 4 23.424 4 22.714V7.286C4 6.576 4.16 6 4.357 6z"/>
+                        <circle cx="7" cy="15" r="1" fill="#222"/>
+                        <path fill="#222" fill-rule="nonzero" d="M24 5.25H6C4.481 5.25 3.25 6.481 3.25 8v14c0 1.519 1.231 2.75 2.75 2.75h18c1.519 0 2.75-1.231 2.75-2.75V8c0-1.519-1.231-2.75-2.75-2.75zM6 6.75h18c.69 0 1.25.56 1.25 1.25v14c0 .69-.56 1.25-1.25 1.25H6c-.69 0-1.25-.56-1.25-1.25V8c0-.69.56-1.25 1.25-1.25z"/>
+                        <path fill="#222" fill-rule="nonzero" d="M16.375 12.2c.276 0 .5.224.5.5 0 .245-.177.45-.41.492l-.09.008h-1.632l-.125.673.156-.004c1.05 0 1.836.756 1.908 1.784l.006.156c0 1.103-.807 1.891-1.914 1.891-.482 0-.94-.172-1.299-.479-.21-.179-.235-.495-.055-.705.16-.186.426-.227.631-.107l.074.052c.18.154.407.239.649.239.56 0 .914-.346.914-.89 0-.561-.37-.941-.914-.941-.188 0-.334.024-.448.072l-.08.042c-.344.214-.772-.049-.764-.432l.01-.084.344-1.858c.039-.208.202-.365.403-.401l.089-.008h2.047zm3.399 0c.263 0 .522.045.768.132.12.043.238.096.351.158.242.133.33.437.197.68-.133.241-.437.33-.68.196-.065-.036-.133-.067-.202-.091-.14-.05-.285-.075-.434-.075-.815 0-1.5.771-1.5 1.75s.685 1.75 1.5 1.75c.193 0 .38-.043.556-.125l.051-.028V15.45h-.53c-.245 0-.449-.177-.491-.41l-.008-.09c0-.245.177-.45.41-.492l.09-.008h1.03c.245 0 .45.177.492.41l.008.09v1.873c0 .158-.074.306-.2.4-.41.308-.898.477-1.408.477-1.395 0-2.5-1.243-2.5-2.75s1.105-2.75 2.5-2.75z"/>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

images/icon-tds-category-kids.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">
+    <defs>
+        <linearGradient id="7d3k13gjka" x1="50%" x2="50%" y1="0%" y2="100%">
+            <stop offset="0%" stop-color="#FE8578"/>
+            <stop offset="100%" stop-color="#FD7768"/>
+        </linearGradient>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <g>
+                <g>
+                    <g transform="translate(-125 -475) translate(30 387) translate(80 80) translate(15 8)">
+                        <path fill="#F6F8FA" fill-opacity="0" d="M0 0L30 0 30 30 0 30z"/>
+                        <path fill="url(#7d3k13gjka)" d="M9.286 5.95h6.428c.71 0 1.286.448 1.286 1V16l-.568.477c-.045.064-.407.73-.432.801l-.688.403H9.286c-.71 0-1.286-.447-1.286-1V6.95c0-.552.576-1 1.286-1z"/>
+                        <path fill="#222" fill-rule="nonzero" d="M17 3.2c1.463 0 2.658 1.142 2.745 2.582l.005.168v7.338l.155-.154c.266-.266.683-.29.977-.073l.084.073c.266.266.29.683.072.976l-.072.085-.99.989c2.224.367 4.051 1.908 4.825 3.965l.486.001c1.184 0 2.113 1.023 2.113 2.25 0 1.174-.85 2.16-1.96 2.244l-.153.006h-.524c-.916 2.314-3.173 3.95-5.813 3.95-2.62 0-4.864-1.612-5.793-3.899L8 23.7c-1.463 0-2.658-1.142-2.745-2.582l-.005-.168v-15c0-1.463 1.142-2.658 2.582-2.745L8 3.2h9zm1.95 13.4c-2.623 0-4.75 2.127-4.75 4.75s2.127 4.75 4.75 4.75 4.75-2.127 4.75-4.75-2.127-4.75-4.75-4.75zm2.615 5.648c.277.308.253.782-.055 1.06-.684.615-1.57.963-2.51.963-.903 0-1.758-.321-2.431-.895-.316-.269-.353-.742-.085-1.057.269-.316.742-.353 1.058-.085.404.345.915.537 1.458.537.565 0 1.095-.208 1.506-.578.307-.277.782-.253 1.059.055zM17.128 4.706L17 4.7H8c-.647 0-1.18.492-1.244 1.122l-.006.128v15c0 .647.492 1.18 1.122 1.244L8 22.2h2.638c-.09-.249-.138-.52-.138-.8 0-1.174.85-2.16 1.96-2.244l.153-.006.486-.001c.788-2.095 2.669-3.654 4.948-3.984l-.97-.97c-.293-.293-.293-.768 0-1.061.266-.266.683-.29.976-.073l.084.073.113.112V5.95c0-.647-.492-1.18-1.122-1.244zm8.16 15.944h-.127c.026.23.039.463.039.7 0 .27-.017.538-.05.8h.137c.322 0 .613-.32.613-.75 0-.39-.24-.69-.526-.742l-.087-.008zm-12.55 0h-.125c-.322 0-.613.32-.613.75 0 .39.24.69.526.742l.087.008h.138c-.034-.262-.051-.53-.051-.8 0-.237.013-.47.039-.7z"/>
+                        <circle cx="17.15" cy="20" r="1" fill="#222"/>
+                        <circle cx="20.75" cy="20" r="1" fill="#222"/>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

images/icon-tds-category-phone.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">
+    <defs>
+        <linearGradient id="ocf8yllzqa" x1="50%" x2="50%" y1="0%" y2="98.301%">
+            <stop offset="0%" stop-color="#FE8578"/>
+            <stop offset="100%" stop-color="#FD7768"/>
+        </linearGradient>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <g>
+                <g>
+                    <g>
+                        <path fill="#F6F8FA" fill-opacity="0" d="M0 0L30 0 30 30 0 30z" transform="translate(-125 -395) translate(30 387) translate(80) translate(15 8)"/>
+                        <path fill="#222" fill-rule="nonzero" d="M21.546 2.75c1.162 0 2.118.894 2.198 2.03l.006.157v20.126c0 1.157-.905 2.102-2.047 2.182l-.157.005H8.454c-1.162 0-2.118-.894-2.198-2.03l-.006-.157V4.937c0-1.157.905-2.102 2.047-2.182l.157-.005h13.092zm0 1.5H8.454c-.358 0-.651.26-.698.595l-.006.092v20.126c0 .346.263.635.608.68l.096.007h13.092c.358 0 .651-.26.698-.595l.006-.092V4.937c0-.346-.263-.635-.608-.68l-.096-.007z" transform="translate(-125 -395) translate(30 387) translate(80) translate(15 8)"/>
+                        <path fill="url(#ocf8yllzqa)" d="M16 22.25c.414 0 .75.336.75.75 0 .38-.282.693-.648.743L16 23.75h-2c-.414 0-.75-.336-.75-.75 0-.38.282-.693.648-.743L14 22.25h2zM19.993 5.5c.556 0 1.007.421 1.007.942v13.115c0 .52-.45.943-1.007.943h-9.986C9.45 20.5 9 20.078 9 19.557V6.442c0-.52.45-.942 1.007-.942h9.986z" transform="translate(-125 -395) translate(30 387) translate(80) translate(15 8)"/>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

images/icon-tds-category-tablet.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">
+    <defs>
+        <linearGradient id="id07mj6jea" x1="50%" x2="50%" y1="0%" y2="100%">
+            <stop offset="0%" stop-color="#FE8578"/>
+            <stop offset="100%" stop-color="#FD7768"/>
+        </linearGradient>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <g>
+                <g>
+                    <g transform="translate(-285 -395) translate(30 387) translate(240) translate(15 8)">
+                        <path fill="#F6F8FA" fill-opacity="0" d="M0 0L30 0 30 30 0 30z"/>
+                        <circle cx="7" cy="15" r="1" fill="#FD786A"/>
+                        <path fill="#222" fill-rule="nonzero" d="M24 5.25H6C4.481 5.25 3.25 6.481 3.25 8v14c0 1.519 1.231 2.75 2.75 2.75h18c1.519 0 2.75-1.231 2.75-2.75V8c0-1.519-1.231-2.75-2.75-2.75zM6 6.75h18c.69 0 1.25.56 1.25 1.25v14c0 .69-.56 1.25-1.25 1.25H6c-.69 0-1.25-.56-1.25-1.25V8c0-.69.56-1.25 1.25-1.25z"/>
+                        <path fill="url(#id07mj6jea)" d="M11 8h12c.552 0 1 .448 1 1v12c0 .552-.448 1-1 1H11c-.552 0-1-.448-1-1V9c0-.552.448-1 1-1z"/>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

images/icon-tds-category-used-phone.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">
+    <defs>
+        <linearGradient id="fws3gvy2la" x1="50%" x2="50%" y1="0%" y2="100%">
+            <stop offset="0%" stop-color="#FE8578"/>
+            <stop offset="100%" stop-color="#FD7768"/>
+        </linearGradient>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <g>
+                <g>
+                    <g>
+                        <path fill="#F6F8FA" fill-opacity="0" d="M0 0L30 0 30 30 0 30z" transform="translate(-285 -475) translate(30 387) translate(240 80) translate(15 8)"/>
+                        <path fill="url(#fws3gvy2la)" d="M9.75 6.25h7c.552 0 1 .448 1 1v9c0 .552-.448 1-1 1h-7c-.552 0-1-.448-1-1v-9c0-.552.448-1 1-1z" transform="translate(-285 -475) translate(30 387) translate(240 80) translate(15 8)"/>
+                        <path fill="#222" fill-rule="nonzero" d="M17.75 3.5c1.463 0 2.658 1.142 2.745 2.582l.005.168V18.5h4.187c.38 0 .694.282.744.648l.006.102v6c0 .38-.282.693-.648.743l-.102.007H11c-.414 0-.75-.336-.75-.75 0-.438.075-.859.213-1.25H8.75c-1.463 0-2.658-1.142-2.745-2.582L6 21.25v-15c0-1.463 1.142-2.658 2.582-2.745L8.75 3.5h9zM23.937 20H20c-.98 0-1.814.626-2.122 1.5h1.856c.414 0 .75.336.75.75 0 .38-.282.693-.648.743l-.102.007H14c-.932 0-1.732.567-2.073 1.374l-.049.126h12.059V20zM17.75 5h-9c-.647 0-1.18.492-1.244 1.122L7.5 6.25v15c0 .647.492 1.18 1.122 1.244l.128.006h2.7c.624-.578 1.445-.947 2.35-.995l.2-.005h2.325c.28-1.385 1.325-2.493 2.675-2.865V6.25c0-.647-.492-1.18-1.122-1.244L17.75 5zm-3.753 14.5c.414 0 .75.336.75.75 0 .38-.282.693-.648.743l-.102.007h-1.515c-.414 0-.75-.336-.75-.75 0-.38.282-.693.648-.743l.102-.007h1.515z" transform="translate(-285 -475) translate(30 387) translate(240 80) translate(15 8)"/>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

images/icon-tds-category-watch.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">
+    <defs>
+        <linearGradient id="n5lpndgl0a" x1="50%" x2="50%" y1="0%" y2="100%">
+            <stop offset="0%" stop-color="#FE8578"/>
+            <stop offset="100%" stop-color="#FD7768"/>
+        </linearGradient>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <g>
+                <g>
+                    <g>
+                        <path fill="#F6F8FA" fill-opacity="0" d="M0 0L30 0 30 30 0 30z" transform="translate(-45 -475) translate(30 387) translate(0 80) translate(15 8)"/>
+                        <path fill="#FE8578" fill-rule="nonzero" d="M23.25 13.25c.38 0 .693.282.743.648L24 14v3c0 .414-.336.75-.75.75-.38 0-.693-.282-.743-.648L22.5 17v-3c0-.414.336-.75.75-.75z" transform="translate(-45 -475) translate(30 387) translate(0 80) translate(15 8)"/>
+                        <path fill="url(#n5lpndgl0a)" fill-rule="nonzero" d="M15 20c-2.761 0-5-2.239-5-5s2.239-5 5-5 5 2.239 5 5-2.239 5-5 5z" transform="translate(-45 -475) translate(30 387) translate(0 80) translate(15 8)"/>
+                        <path fill="#222" fill-rule="nonzero" d="M11.75 22.08v3.228c0 .488.333.878.745.935l.105.007h4.8c.424 0 .79-.352.843-.822l.007-.12V22.08h1.5v3.228c0 1.284-.957 2.35-2.188 2.436l-.162.006h-4.8c-1.253 0-2.263-1.013-2.345-2.276l-.005-.166V22.08h1.5zM17.4 2.25c1.253 0 2.263 1.013 2.345 2.276l.005.166v3.405h-1.5V4.692c0-.488-.333-.878-.745-.935L17.4 3.75h-4.8c-.424 0-.79.352-.843.822l-.007.12v3.405h-1.5V4.692c0-1.284.957-2.35 2.188-2.436l.162-.006h4.8z" transform="translate(-45 -475) translate(30 387) translate(0 80) translate(15 8)"/>
+                        <path fill="#222" fill-rule="nonzero" d="M20.02 7.02c1.657 0 3 1.343 3 3v10c0 1.657-1.343 3-3 3h-10c-1.657 0-3-1.343-3-3v-10c0-1.657 1.343-3 3-3h10zm0 1.5h-10c-.78 0-1.42.595-1.493 1.356l-.007.144v10c0 .78.595 1.42 1.356 1.493l.144.007h10c.78 0 1.42-.595 1.493-1.356l.007-.144v-10c0-.78-.595-1.42-1.356-1.493l-.144-.007z" transform="translate(-45 -475) translate(30 387) translate(0 80) translate(15 8)"/>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

images/icon-tds-category-wifi.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">
+    <defs>
+        <linearGradient id="cbxv423zpa" x1="50%" x2="50%" y1="0%" y2="100%">
+            <stop offset="0%" stop-color="#FE8578"/>
+            <stop offset="100%" stop-color="#FD7768"/>
+        </linearGradient>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <g>
+                <g>
+                    <g transform="translate(-205 -475) translate(30 387) translate(160 80) translate(15 8)">
+                        <path fill="#F6F8FA" fill-opacity="0" d="M0 0L30 0 30 30 0 30z"/>
+                        <path fill="#222" d="M15.707 11.543c.39.39.39 1.023 0 1.414-.39.39-1.023.39-1.414 0-.39-.39-.39-1.023 0-1.414.39-.39 1.023-.39 1.414 0"/>
+                        <path fill="#222" fill-rule="nonzero" d="M11.32 9.35c2.067-2.067 5.416-2.067 7.483 0 .292.292.292.767 0 1.06-.293.293-.768.293-1.061 0-1.48-1.48-3.88-1.48-5.362 0-.293.293-.768.293-1.06 0-.293-.293-.293-.768 0-1.06z"/>
+                        <path fill="#222" fill-rule="nonzero" d="M22.967 9.465c.38 0 .693.282.743.648l.007.102-.001 6.035H24c1.463 0 2.658 1.142 2.745 2.582l.005.168v3c0 1.519-1.231 2.75-2.75 2.75H6c-1.519 0-2.75-1.231-2.75-2.75v-3c0-1.519 1.231-2.75 2.75-2.75h.216v-6.035c0-.414.336-.75.75-.75.38 0 .694.282.744.648l.007.102-.001 6.035h14.5v-6.035c0-.414.336-.75.75-.75zM24 17.75H6c-.69 0-1.25.56-1.25 1.25v3c0 .69.56 1.25 1.25 1.25h18c.69 0 1.25-.56 1.25-1.25v-3c0-.69-.56-1.25-1.25-1.25z"/>
+                        <rect width="18" height="3" x="6" y="19" fill="url(#cbxv423zpa)" rx="1"/>
+                        <path fill="#222" fill-rule="nonzero" d="M9.37 7.148c3.13-3.13 8.205-3.13 11.336 0 .293.293.293.768 0 1.06-.293.294-.768.294-1.06 0-2.546-2.544-6.67-2.544-9.216 0-.293.294-.767.294-1.06 0-.293-.292-.293-.767 0-1.06z"/>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

system.html

+<!DOCTYPE html>
+<html lang="ko">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+    <title>My &lt; MAIN</title>
+    <link rel="stylesheet" href="tdirect.css">
+    <link rel="stylesheet" href="common/scss/reset.css">
+    <link rel="stylesheet" href="system.module.css">
+</head>
+
+<body>
+    <div class="wrap-device-list">
+        <!-- 헤더영역 -->
+        <div class="device-list-header">
+            <div class="top-header">
+                <div class="top-header-left">
+                    <img src="images/go-back-img@2x.png" /><span>휴대폰</span>
+                </div>
+                <div class="top-header-right">
+                    <span class="ico-cart"><img src="images/cart@2x.png" /></span>
+                    <span class="ico-mypage"><img src="images/mypage@2x.png" /></span>
+                </div>
+            </div>
+        </div>
+     
+        <!-- 서비스점검안내 -->
+        <div class="system-maintenance">
+            <div class="contents-inner">
+                <div class="icon-area">
+                    <img src="images/icons-detail-system-error.png" />
+                </div>
+                <div class="system-tit">
+                    시스템 점검 안내
+                </div>
+                <div class="system-stit">
+                    이용에 불편을 드려 대단히 죄송합니다.<br>
+                    보다 나은 서비스를 제공하기 위해 준비중입니다.<br>
+                    점검 시간 동안 서비스 이용이 제한되오니<br>
+                    고객님들의 많은 양해 부탁드립니다.
+                </div>
+                <div class="system-period">
+                    점검 일시: 2021. 07. 31 (토) 00:00 ~ 06:00 
+                </div>
+            </div>
+            
+        </div>
+       
+    </div>
+</body>
+
+</html>
\ No newline at end of file

system.module.css

+.wrap-device-list {
+  position: relative;
+  letter-spacing: -0.4px;
+  color: #222;
+  line-height: 1.25em;
+  word-break: keep-all;
+  background-color: #f6f8fa;
+  font-weight: 400;
+  font-family: "Spoqa Han Sans", "Apple SD Gothic Neo", "NotoSansCJKkr", sans-serif;
+  font-style: normal;
+  -webkit-text-size-adjust: none;
+}
+
+.wrap-device-list ol,
+.wrap-device-list ul,
+.wrap-device-list li {
+  list-style: none;
+}
+
+.wrap-device-list hr {
+  display: block;
+  height: 2px;
+  margin: 20px 0;
+  border-radius: 1px;
+  border: none;
+  -webkit-box-shadow: inset 1px 1px 1px rgba(186, 186, 189, 0.5);
+          box-shadow: inset 1px 1px 1px rgba(186, 186, 189, 0.5);
+}
+
+.wrap-device-list button {
+  padding: 0;
+  letter-spacing: -0.4px;
+  font-family: inherit;
+  border: 0;
+  background-color: transparent;
+  cursor: pointer;
+  outline: 0;
+}
+
+.wrap-device-list .blind {
+  position: absolute !important;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  clip: rect(0, 0, 0, 0);
+  color: transparent;
+}
+
+.wrap-device-list .section-tit {
+  position: relative;
+  line-height: 1.5;
+  margin-bottom: 10px;
+  font-size: 13px;
+  z-index: 2;
+  padding-left: 20px;
+}
+
+.wrap-device-list hr {
+  width: calc(100% - 40px);
+  height: 2px;
+  margin: 0px auto 30px auto;
+  -o-object-fit: contain;
+     object-fit: contain;
+  border-radius: 1px;
+  -webkit-box-shadow: inset 1px 1px 1px 0 rgba(186, 186, 189, 0.5);
+          box-shadow: inset 1px 1px 1px 0 rgba(186, 186, 189, 0.5);
+  background-color: #efeff1;
+}
+
+.wrap-device-list .device-list-header .top-header {
+  width: calc(100% - 40px);
+  height: 52px;
+  margin: 0 auto;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+}
+
+.wrap-device-list .device-list-header .top-header .top-header-left {
+  width: auto;
+  height: 25px;
+}
+
+.wrap-device-list .device-list-header .top-header .top-header-left img {
+  width: 18px;
+  height: 16px;
+}
+
+.wrap-device-list .device-list-header .top-header .top-header-left span {
+  margin: 0 0 0 13px;
+  font-family: inherit;
+  font-size: 18px;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: -0.53px;
+  color: #000000;
+}
+
+.wrap-device-list .device-list-header .top-header .top-header-right {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.wrap-device-list .device-list-header .top-header .top-header-right .ico-cart {
+  width: 19px;
+  height: 20px;
+  margin-right: 17px;
+  padding-top: 1px;
+}
+
+.wrap-device-list .device-list-header .top-header .top-header-right .ico-cart img {
+  width: 19px;
+  height: 20px;
+}
+
+.wrap-device-list .device-list-header .top-header .top-header-right .ico-mypage {
+  width: 20px;
+  height: 20px;
+}
+
+.wrap-device-list .device-list-header .top-header .top-header-right .ico-mypage img {
+  width: 20px;
+  height: 20px;
+}
+
+.wrap-device-list .system-maintenance {
+  background-color: #f6f8fa;
+  height: calc(100vh - 52px);
+}
+
+.wrap-device-list .system-maintenance .contents-inner {
+  width: 320px;
+  margin: 0 auto;
+  padding: 148px 0 0 0;
+}
+
+.wrap-device-list .system-maintenance .contents-inner .icon-area {
+  width: 90px;
+  height: 90px;
+  margin: 0 auto;
+}
+
+.wrap-device-list .system-maintenance .contents-inner .icon-area img {
+  width: 90px;
+  height: 90px;
+}
+
+.wrap-device-list .system-maintenance .contents-inner .system-tit {
+  width: 320px;
+  height: 21px;
+  margin: 16px 0 0 0;
+  font-family: inherit;
+  font-size: 18px;
+  font-weight: bold;
+  letter-spacing: -0.5px;
+  text-align: center;
+  color: #222222;
+}
+
+.wrap-device-list .system-maintenance .contents-inner .system-stit {
+  width: 320px;
+  height: 64px;
+  margin: 24px 0 0 0;
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: normal;
+  line-height: normal;
+  letter-spacing: -1px;
+  text-align: center;
+  color: #767778;
+}
+
+.wrap-device-list .system-maintenance .contents-inner .system-period {
+  width: 320px;
+  height: 13px;
+  margin: 16px 0 0 0;
+  font-family: inherit;
+  font-size: 11px;
+  font-weight: normal;
+  line-height: normal;
+  letter-spacing: -0.4px;
+  text-align: center;
+  color: #767778;
+}
+/*# sourceMappingURL=system.module.css.map */
\ No newline at end of file

system.module.css.map

+{
+    "version": 3,
+    "mappings": "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",
+    "sources": [
+        "system.module.scss"
+    ],
+    "names": [],
+    "file": "system.module.css"
+}
\ No newline at end of file

system.module.scss

+@charset "UTF-8";
+
+.wrap-device-list {
+    position: relative;
+    letter-spacing: -0.4px;
+    color: #222;
+    line-height: 1.25em;
+    word-break: keep-all;
+    background-color: #f6f8fa;
+    font-weight: 400;
+    font-family: "Spoqa Han Sans", "Apple SD Gothic Neo", "NotoSansCJKkr", sans-serif;
+    font-style: normal;
+    -webkit-text-size-adjust: none;
+
+    ol,
+    ul,
+    li {
+        list-style: none;
+    }
+
+    hr {
+        display: block;
+        height: 2px;
+        margin: 20px 0;
+        border-radius: 1px;
+        border: none;
+        box-shadow: inset 1px 1px 1px rgba(186, 186, 189, 0.5);
+    }
+
+    button {
+        padding: 0;
+        letter-spacing: -0.4px;
+        font-family: inherit;
+        border: 0;
+        background-color: transparent;
+        cursor: pointer;
+        outline: 0;
+    }
+
+    .blind {
+        position: absolute !important;
+        overflow: hidden;
+        width: 1px;
+        height: 1px;
+        margin: -1px;
+        clip: rect(0, 0, 0, 0);
+        color: transparent;
+    }
+
+    .section-tit {
+        position: relative;
+        line-height: 1.5;
+        margin-bottom: 10px;
+        font-size: 13px;
+        z-index: 2;
+        padding-left: 20px;
+    }
+
+    hr {
+        width: calc(100% - 40px);
+        height: 2px;
+        margin: 0px auto 30px auto;
+        object-fit: contain;
+        border-radius: 1px;
+        box-shadow: inset 1px 1px 1px 0 rgba(186, 186, 189, 0.5);
+        background-color: #efeff1;
+    }
+
+    // Header
+    .device-list-header {
+        .top-header {
+            width: calc(100% - 40px);
+            height: 52px;
+            margin: 0 auto;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            .top-header-left {
+                width: auto;
+                height: 25px;
+
+
+                img {
+                    width: 18px;
+                    height: 16px;
+                }
+
+                span {
+                    margin: 0 0 0 13px;
+                    font-family: inherit;
+                    font-size: 18px;
+                    font-weight: normal;
+                    font-stretch: normal;
+                    font-style: normal;
+                    line-height: normal;
+                    letter-spacing: -0.53px;
+                    color: #000000;
+                }
+            }
+
+            .top-header-right {
+                display: flex;
+
+                .ico-cart {
+                    width: 19px;
+                    height: 20px;
+                    margin-right: 17px;
+                    padding-top: 1px;
+
+                    img {
+                        width: 19px;
+                        height: 20px;
+                    }
+                }
+
+                .ico-mypage {
+                    width: 20px;
+                    height: 20px;
+
+                    img {
+                        width: 20px;
+                        height: 20px;
+                    }
+                }
+
+            }
+        }
+    } 
+
+    // 서비스점검안내
+    .system-maintenance {
+        background-color: #f6f8fa;
+        height: calc(100vh - 52px);
+        .contents-inner {
+            width: 320px;
+            margin:0 auto;
+            padding:148px 0 0 0;
+            .icon-area {
+                width: 90px;
+                height: 90px;
+                margin: 0 auto;
+                img{
+                    width: 90px;
+                    height: 90px;
+                }
+            }
+            .system-tit {
+                width: 320px;
+                height: 21px;
+                margin: 16px 0 0 0;
+                font-family: inherit;
+                font-size: 18px;
+                font-weight: bold;
+                letter-spacing: -0.5px;
+                text-align: center;
+                color: #222222;
+            }
+            .system-stit {
+                width: 320px;
+                height: 64px;
+                margin: 24px 0 0 0;
+                font-family: inherit;
+                font-size: 13px;
+                font-weight: normal;
+                line-height: normal;
+                letter-spacing: -1px;
+                text-align: center;
+                color: #767778;
+            }
+            .system-period {
+                width: 320px;
+                height: 13px;
+                margin: 16px 0 0 0;
+                font-family: inherit;
+                font-size: 11px;
+                font-weight: normal;
+                line-height: normal;
+                letter-spacing: -0.4px;
+                text-align: center;
+                color: #767778;
+            }
+        }
+    }
+}